引导表分页超出屏幕答案

【问题标题】：bootstrap table pagination going out of screen引导表分页超出屏幕
【发布时间】：2016-11-04 17:28:36
【问题描述】：

我的表格有 n 行，如果我对表格使用分页，则分页器非常大。有什么办法可以限制分页。例如，分页应包含 1,2,3，点击下一步时，1,2,3 应替换为 4,5,6 等等。这样分页就不会超出屏幕。我对我的代码进行了许多更改，但它不起作用。谁能帮我解决这个问题？

【问题讨论】：

如果你只是想调整大小：添加类 .pagination-lg 用于较大的块或 .pagination-sm 用于较小的块
谢谢。但即使我调整大小，分页也很长，因为表格可能包含超过 500 行。
Table pagination using bootstrap is not working的可能重复

标签： twitter-bootstrap pagination

【解决方案1】：

我找到了一个 jQuery 插件，应该很有帮助。这是link。

一旦你用这段代码设置了东西：

<html>
<head>
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
    <div id="content">Dynamic Content goes here</div>
    <div id="page-selection">Pagination goes here</div>
    <script>
        // init bootpag
        $('#page-selection').bootpag({
            total: 10
        }).on("page", function(event, /* page number here */ num){
             $("#content").html("Insert content"); // some ajax content loading...
        });
    </script>
</body>
</html>

然后你可以使用这个：

 $('.demo3').bootpag({
   total: 500,
   page: 3,
   maxVisible: 3,
   href: "#pro-page-{{number}}",
   leaps: false,
   next: 'next',
   prev: null
}).on('page', function(event, num){
    $(".content3").html("Page " + num); // or some ajax content loading...
});

如果这有帮助，请告诉我。

【讨论】：