屏幕上的引导表分页

时间:2016-11-04 07:09:53

标签: twitter-bootstrap pagination

我的表有n行,如果我对表使用分页,则寻呼机非常大。有没有办法限制分页。例如,分页应包含1,2,3,然后单击下一步,1,2,3应替换为4,5,6,依此类推。这样分页就不会出现在屏幕上。我用我的代码尝试了很多更改但它无法正常工作。有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

我发现了一个非常有用的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...
});

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