时间戳

首页 > 解决方案 > Bootstrap DataTables - 分页不适用于动态网格系统

php - Bootstrap DataTables - 分页不适用于动态网格系统

问题描述

我正在尝试在网格视图中显示用户列表。

我的代码：

这是一个简单的 php 数组。

<?php $aso_arr = array( 
    "1"=>"1",  
    "2"=>"2",  
    "3"=>"3",  
    "4"=>"4",
    "5"=>"5",  
    "6"=>"6",  
    "7"=>"7",
    "8"=>"8",  
    "9"=>"9",  
    "10"=>"10",  
    "11"=>"11",
    "12"=>"12",  
    "13"=>"13",  
    "14"=>"14",
    "15"=>"15",  
    "16"=>"16",  
    "17"=>"17",  
    "18"=>"18",
    "19"=>"19",  
    "20"=>"20",  
    "21"=>"21"
); ?>

和表结构 -

<table id="example" class="table table-striped table-bordered" >
<thead>
</thead>
<tbody>
<tr>
<?php $i=0; foreach($aso_arr as $side=>$s) { ?>
<td>
<div class="card" >
<div class="card-img-top" ></div>
<div class="card-body text-center">
<img class="avatar rounded-circle" src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/robert.jpg" alt="Bologna">
<h4 class="card-title">Robert Downey Jr.</h4>
<h6 class="card-subtitle mb-2 text-muted">Famous Actor</h6>
<p class="card-text">Robert John  </p>
<a href="#" class="btn btn-info">View Profile</a>
</div>
</div>
</div>
</td>
<?php  $i++; if ($i % 4 == 0) {echo '</tr><tr>';}  } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

我在每四个元素的间隔中创建了一个新行。如果我删除了 foreach 循环，表格工作得很好，分页也很好。但是对于循环，分页不起作用。请帮助不知道为什么它不起作用。

标签： phpjquerydatatablebootstrap-4

解决方案

看起来你tbody的坏了，这就是 DataTable 无法正常工作的原因。

尝试用下一个替换thead和tbody：


<?php  
$aso_arr = array( 
    "1"=>"1",  
    "2"=>"2",  
    "3"=>"3",  
    "4"=>"4",
    "5"=>"5",  
    "6"=>"6",  
    "7"=>"7",
    "8"=>"8",  
    "9"=>"9",  
    "10"=>"10",  
    "11"=>"11",
    "12"=>"12",  
    "13"=>"13",  
    "14"=>"14",
    "15"=>"15",  
    "16"=>"16",  
    "17"=>"17",  
    "18"=>"18",
    "19"=>"19",  
    "20"=>"20",  
    "21"=>"21"
); ?>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
<?php $num = 1; foreach($aso_arr as $side=>$s) { ?>
   <?php if ($num % 4 == 1) {?>
 <tr>
    <td style="display:none;"><?= $num; ?></td>
   <?php } ?>
    <td>
       <div class="card" >
       <div class="card-img-top" ></div>
       <div class="card-body text-center">
       <img class="avatar rounded-circle" src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/robert.jpg" alt="Bologna">
       <h4 class="card-title">Robert Downey Jr.<?= $num; ?></h4>
       <h6 class="card-subtitle mb-2 text-muted">Famous Actor</h6>
       <p class="card-text">Robert John  </p>
       <a href="#" class="btn btn-info">View Profile</a>
       </div>
       </div>
       </div>
    </td>
    <?php if ($num % 4 == 0) {?>
 </tr>
     <?php } ?>

<?php $num++; } ?>

     <?php $td = 4 - count($aso_arr) % 4; if ($td != 0): ?>
            <?php for($i=0;$i< $td; $i++): ?>
            <td></td>
            <?php endfor;?>
     <?php endif; ?>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

JS：

<script>
    $(document).ready(function() {
        $('#example').DataTable({       
          "order": [[ 0, "asc" ]],
          "lengthMenu": [ 2, 25, 50, 75, 100 ]
        });
    } );
</script>

添加thead与中相同th的td数量tbody。

此循环将创建 4 列 ( td)，其中一行 ( tr) 为您的$aso_arr.

推荐阅读