Bootstrap 3表分页错误

即时尝试为从查询结果生成的coulpe表做分页。正如在试图使用引导程序插件链接：http://www.bootply.com/lxa0FF9yhw Bootstrap 3表分页错误

当我运行页面时，我在控制台选项卡中出现此错误：未捕获TypeError：children.size不是一个函数，重定向我在这部分该片段

var numItems = children.size();

我是一个jQuery总共初学者，不知道如何解决这个问题。任何帮助非常感谢，非常感谢！表中的问题：

<h2 class="text-center">Reservations For Today</h2> 
        <hr> 
        <table class="table table-hover" id="myTable"> 
         <thead> 
          <th>Reservation ID</th> 
          <th>User ID</th> 
          <th>Table #1</th> 
          <th>Table #2</th> 
          <th>Persons</th> 
          <th>Reservation Made on</th> 
          <th>Reserved by</th> 
          <th>Reserved via</th> 
          <th>Reserved for</th> 
          <th>Arrival</th> 
          <th>Departure</th> 
          <th>Reservation Status</th> 
          <th>Attendance</th> 
         </thead> 
         <tbody id="myTableBody"> 
        <?php 
        $sql4 = "SELECT * FROM reservations WHERE reserve_date = '$today' ORDER BY reservation_status ASC, reserve_date ASC, reserve_time_start ASC"; 
        $result4 = mysqli_query($conn, $sql4); 
        while($row = mysqli_fetch_assoc($result4)){ 
         echo '<tr>'; 
          foreach($row as $field) { 
           if($field === null){ 
            echo '<td>' . " - " . '</td>'; 
           }else{ 
           echo '<td>' . htmlspecialchars($field) . '</td>'; 
           } 
          } 
         echo '</tr>'; 
        } 
        ?> 
         </tbody> 
        </table> 

        <div class="col-md-12 text-center"> 
         <ul class="pagination pagination-lg pager" id="myPager"></ul> 
        </div> 

        <button type="button" class="prev">Previous</button> 
        <button type="button" class="next">Next</button> 
        <button id="myBtn">Edit Attendance</button>

来源

2017-05-14 Filippos Georgiou

提醒一下：https://stackoverflow.com/help/someone-answers –

upvoted和接受的答案，非常感谢！ –

首先 - 你不应该使用与函数名称相同的名称pod变量。其次 - size（）已被弃用see manual: size()这就是为什么你有这些信息。这不再是功能。

来源

2017-05-14 11:27:04 Sylogista

Bootstrap 3 Table Pagination的代码片段。这是我已经测试过的工作代码。我在这里使用的是用于jQuery的DataTables插件DataTables link通过此链接，您将发现有关bootstrap3分页的所有信息。

<!DOCTYPE html> 
<html> 

<head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
</head> 

<body> 

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th>    
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th>     
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td>    
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td>     
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td>     
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>Senior Javascript Developer</td> 
       <td>Edinburgh</td> 
       <td>22</td>     
      </tr> 
      <tr> 
       <td>Airi Satou</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>33</td>     
      </tr> 
      <tr> 
       <td>Brielle Williamson</td> 
       <td>Integration Specialist</td> 
       <td>New York</td> 
       <td>61</td>    
      </tr> 
      <tr> 
       <td>Herrod Chandler</td> 
       <td>Sales Assistant</td> 
       <td>San Francisco</td> 
       <td>59</td>     
      </tr> 
      <tr> 
       <td>Rhona Davidson</td> 
       <td>Integration Specialist</td> 
       <td>Tokyo</td> 
       <td>55</td>     
      </tr> 
      <tr> 
       <td>Colleen Hurst</td> 
       <td>Javascript Developer</td> 
       <td>San Francisco</td> 
       <td>39</td>     
      </tr> 
      <tr> 
       <td>Sonya Frost</td> 
       <td>Software Engineer</td> 
       <td>Edinburgh</td> 
       <td>23</td>     
      </tr> 
      <tr> 
       <td>Jena Gaines</td> 
       <td>Office Manager</td> 
       <td>London</td> 
       <td>30</td>     
      </tr> 
      <tr> 
       <td>Quinn Flynn</td> 
       <td>Support Lead</td> 
       <td>Edinburgh</td> 
       <td>22</td>     
      </tr> 
      <tr> 
       <td>Charde Marshall</td> 
       <td>Regional Director</td> 
       <td>San Francisco</td> 
       <td>36</td>     
      </tr> 
      <tr> 
       <td>Haley Kennedy</td> 
       <td>Senior Marketing Designer</td> 
       <td>London</td> 
       <td>43</td>     
      </tr> 
     </tbody> 
    </table> 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#example').DataTable(); 
     }); 
    </script> 
</body> 

</html>

希望这将帮助你

来源

2017-05-14 11:48:05

Bootstrap 3表分页错误

回答

相关问题