Footable 分页根本不显示

Question

我正在努力显示可用的分页，但即使我检查了文档和所有其他示例，仍然无法弄清楚。在下面的代码中，以不同的方式尝试了两个表，并且都没有显示分页。有谁能解释并指出在此代码中显示分页需要什么？谢谢

<html lang="en">
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.css">
    </head>


    <body>
        <table class="table footable table-striped" data-paging="true">
                <thead>
                        <tr>
                            <th data-breakpoints = "xs">Col 1</th>
                            <th data-breakpoints = "xs">Col 2</th>
                            <th data-breakpoints = "xs">Col 3</th>  
                        </tr>

                </thead>
                <tbody>
                        <tr>
                            <td>test1</td>
                            <td>test2</td>
                            <td>test3</td>
                        </tr>
                        <tr>
                                <td>test1</td>
                                <td>test2</td>
                                <td>test3</td>
                            </tr>
                            <tr>
                                    <td>test1</td>
                                    <td>test2</td>
                                    <td>test3</td>
                                </tr>
                                <tr>
                                        <td>test1</td>
                                        <td>test2</td>
                                        <td>test3</td>
                                    </tr>   

                    </tbody>
                    <tfoot>

                    </tfoot>
        </table>
        <table id="tblTesting" class="testingTable table table-striped" data-paging="true" data-page-navigation=".pagination" >
        </table>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.js"></script>


    </body>
</html>

<script>

    $(document).ready(function(){
        $('.footable').footable();


       $('#tblTesting').footable({
        paging:{"enabled": true},
        columns:[
  {"name":"id","title":"ID","breakpoints":"xs sm","type":"number","style":{"width":80,"maxWidth":80}},
  {"name":"firstName","title":"First Name"},
  {"name":"lastName","title":"Last Name"},
  {"name":"something","title":"Never seen but always around","visible":false,"filterable":false},
  {"name":"jobTitle","title":"Job Title","breakpoints":"xs sm","style":{"maxWidth":200,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
  {"name":"started","title":"Started On","type":"date","breakpoints":"xs sm md","formatString":"MMM YYYY"},
  {"name":"dob","title":"Date of Birth","type":"date","breakpoints":"xs sm md","formatString":"DD MMM YYYY"},
  {"name":"status","title":"Status"}
],
"rows":[
  {"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"}
]

    });
    });
</script>

Answer 1

只是数据量小，填充10个以上试试。大多数分页插件默认使用 10。

Footable 分页根本不显示

Footable Pagination Not Showing at all

html

javascript

jquery

footable