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

Question

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

我的代码：

这是一个简单的 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 循环，表格工作得很好，分页也很好。 但是对于循环，分页不起作用。 请帮助不知道为什么它不起作用。

Answer 1

您的 tbody 好像坏了，这就是 DataTable 无法正常工作的原因。

尝试将thead和tbody替换为next：

<?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>

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

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

Answer 2

<?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",
); ?>

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <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"> 
</head>
<body>
 <table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th></th><th></th><th></th><th></th>
    </tr>
  </thead>

        <tbody>
           <?php  

            $loop_counter = round((sizeof($aso_arr))/4); 

            $split_array = array_chunk($aso_arr,4);  
            $loop_counter = sizeof($split_array); 
             for ($j=0; $j < $loop_counter; $j++) {   
            ?>

            <tr>
               <?php 
               $array_length = sizeof($split_array[$j]);
               $colspan = 0;
                for($i=0;$i < $array_length;$i++){
                  if($array_length < 4){ 
                    $colspan = 4-$array_length;
                  }
                 ?>
                <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>
                      <!--<a href="#" class="btn btn-outline-info">Message</a>-->
                    </div>
                  </div>
                </div>
                </td>
                <?php 
                if($colspan > 0){
                for ($k=0; $k < $colspan; $k++) { ?>
                   <td style="display: none"></td>

           <?php     }}
            ?>
            <?php }
            echo "</tr>";
          }?>

        </tbody>
   <tfoot> 
    <tr>
      <th></th><th></th><th></th><th></th>
    </tr>
  </tfoot>
    </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>



<script>
    $(document).ready(function() {
        $('#example').DataTable({
          "pageLength": 2
        });
    } );
</script>


</body>
</html>