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表分頁錯誤

回答

相關問題