2016-11-04 15 views
0

私のテーブルにはn個の行があり、テーブルにページングを使用すると、ページャーは非常に大きくなります。ページネーションを制限する方法はありますか?たとえば、ページ番号には1,2,3が含まれ、次にクリックすると1,2,3は4,5,6に置き換えられます。ページネーションが画面外に出ないようにします。私は自分のコードで多くの変更を試みましたが、うまくいきません。誰もこのことから私を助けてくれますか?ブートストラップテーブルページングが画面外に出る

+0

サイズを調整したい場合:大きいブロックの場合は.pagination-lg、小さいブロックの場合は.pagination-smを追加してください。 –

+0

ありがとうございます。しかし、サイズを調整しても、表には500行以上が含まれている可能性があるため、ページ区切りは非常に長いです。 – Owner

+0

[ブートストラップを使用しているテーブルのページ設定が重複している可能性があります](http://stackoverflow.com/questions/40416972/table-pagination-using-bootstrap-is-not-working) – vanburen

答えて

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... 
}); 

はこれが助けたなら、私に教えてください。

関連する問題