Question

我试图为从查询结果生成的coulpe表进行分页。正如标题中所述，我试图使用bootstrap插件链接：http://www.bootply.com/lxa0FF9yhw

当我运行页面时，我在控制台选项卡中收到此错误：未捕获的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>

Answer 1

Bootstrap 3 Table Pagination的代码片段。它已经测试过的工作代码可以试试。我在这里使用DataTables插件进行jQuery是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>

希望这会对您有所帮助

Answer 2

首先 - 您不应该使用与函数名称相同的名称pod变量。其次 - 不推荐使用size（）see manual: size()这就是您拥有该信息的原因。这不再是功能了。

Bootstrap 3表分页错误

2 个答案: