问完全没有显示的可分页
EN

Stack Overflow用户

提问于 2019-10-23 03:07:11

回答 1查看 628关注 0票数 1

尽管我查看了文档和所有其他示例，但我仍然很难显示可分页的显示，并且仍然无法理解它。在下面的代码中，两个表以不同的方式尝试，并且都不显示分页。有人能解释并指出在这段代码中显示分页所需的内容吗？谢谢。

<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>

javascript

jquery

html

footable

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-23 04:05:50

这仅仅是因为数据很小，试着填充超过10或这样的smth。大多数分页插件默认使用10。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58514892

复制

相似问题

问完全没有显示的可分页
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问完全没有显示的可分页EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问完全没有显示的可分页
EN