个人中心
gpt4 book ai didi

javascript - Bootstrap 3 表分页错误

转载 作者：太空宇宙 更新时间：2023-11-04 15:40:01 24 4
gpt4 key购买 nike

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

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

最佳答案

Bootstrap 3 表分页的代码片段。这是我已经测试过的工作代码，尝试一下。我正在使用 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>

希望这对您有帮助

关于javascript - Bootstrap 3 表分页错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43963202/

24 4 0
文章推荐： javascript - 为什么如果 F - 简单函数 : F. 原型(prototype)!== F.__proto__ 但 Function.prototype === Function.__proto__？
文章推荐： javascript - 将javascript插入同一域的不同页面
文章推荐： CSS:删除通用选择器应用的边框
文章推荐： c++ - 在 C++ 中调用的第二个构造函数(错误输出)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com