Bootstrap table doubles/triples 等行

Question

我有一个问题（我正在用我自己的代码使用 WordPress）。在实施 bootstrap table 对我的数据进行排序之前，它显示了 3 行信息，实施后显示了 9 行，所以我尝试再添加一个 post 并且它显示 16（每次加倍). 我应该在我的代码中更改什么以停止乘法？使用过滤器（从 wordpress posts 搜索）

后，我将数据从 url 获取到 table

    <div class="table-responsive">
            <table 
 id="table"
data-toggle="table"
  data-search="true"
  data-show-columns="true"
 class="table table-striped">
      <thead>
        <tr>
          <th  scope="col">Goods</th>
          <th  scope="col">Tent</th>
          <th   data-sortable="true" scope="col">Load/Unload</th>
          <th   scope="col">From/To</th>
        </tr>
      </thead>
                <div class="post clearfix">
            <?php
                    $args = array(
                        'post_type' => 'post',
                        'posts_per_page' => -1,
                        'meta_query' => array(
                            array(
                                'key' => 'tent',
                                'value' => $tent,
                                'compare' => 'LIKE'
                            ),

                            array(
                                'key' => 'laadimise_kp',
                                'value' => array($laadimise_kp, $mahalaadimine),
                                'compare' => 'BETWEEN',
                                'type' => 'DATE'
                            ),

                            array(
                                'key' => 'from',
                                'value' => $from,
                                'compare' => 'LIKE'
                            ),

                            array(
                                'key' => 'to',
                                'value' => $to,
                                'compare' => 'LIKE'
                            ),
                        )
                    );
                    $query = new WP_Query($args);
                    while($query -> have_posts()) : $query -> the_post();
            ?>
            </div>


      <tbody>
          <th ><?php the_title( '<h5 style="font-size: 16px;" class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h5>' ); ?></th>
          <td ><?php the_field('tent'); ?></td>
          <td ><?php the_field('laadimise_kp'); ?> <strong>-</strong>  <?php the_field('mahalaadimine'); ?><br></td>
          <td ><?php the_field('from'); ?><strong>-</strong><?php the_field('to'); ?></td> 
      </tbody>


            <?php endwhile; wp_reset_query(); ?>

    </table></div>

图片： How it should look like 对比 How it looks

Answer 1

我不擅长 WP，但你的 HTML 标记需要更改，因为你直接在 table 中添加 DIV 元素，这是不正确的，你正在使用WHILE 循环并为每个循环重复 TBODY 元素。

Table结构是这样的：

<table>
    <thead>
        <tr><th>Col Heading</th></tr>
    </thead>
    <tbody>
        <tr><td>Cell Value1</td></tr>
        <tr><td>Cell Value2</td></tr>
    </tbody>
    <tfoot>
        <tr><th>Col Heading</th></tr>
    </tfoot>
</table>

您需要重新格式化您的代码和结构，使其与此类似。

Answer 2

我只在页眉和正文中添加一个就可以使用了

    <div class="post clearfix">
                <div class="table-responsive">
            <table 
     data-toggle="table"
  data-search="true"
  data-show-columns="true"
 class="table table-striped">
      <thead>
        <tr>
          <th  scope="col">Goods</th>
         <th  scope="col">Tent</th>
         <th   data-sortable="true" scope="col">Load/Unload</th>
        <th   scope="col">From/To</th>
      </tr>

      </thead>



      <tbody>
<?php
                    $args = array(
                        'post_type' => 'post',
                        'posts_per_page' => -1,
                        'meta_query' => array(
                            array(
                                'key' => 'tent',
                                'value' => $tent,
                                'compare' => 'LIKE'
                            ),

                            array(
                                'key' => 'laadimise_kp',
                                'value' => array($laadimise_kp, $mahalaadimine),
                                'compare' => 'BETWEEN',
                                'type' => 'DATE'
                            ),

                            array(
                                'key' => 'from',
                                'value' => $from,
                                'compare' => 'LIKE'
                            ),

                            array(
                                'key' => 'to',
                                'value' => $to,
                                'compare' => 'LIKE'
                            ),
                        )
                    );
                    $query = new WP_Query($args);
                    while($query -> have_posts()) : $query -> the_post();
?>  
         <tr>
    <td><?php the_title( '<h5 style="font-size: 16px;" class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h5>' ); ?></td>
          <td><?php the_field('tent'); ?></td>
          <td><?php the_field('laadimise_kp'); ?> <strong>-</strong>  <?php the_field('mahalaadimine'); ?><br></td>
          <td><?php the_field('from'); ?><strong>-</strong><?php the_field('to'); ?></td>
    </tr>
                <?php endwhile; wp_reset_query(); ?>
      </tbody>





    </table>
</div>
</div>

Bootstrap table doubles/triples 等行

Bootstrap table doubles/triples etc the rows

html

wordpress

bootstrap-4

bootstrap-table