2

jquery ui simplePagination プラグインを使用しており、ページに現在のレコード数を表示しようとしています。

私はこのようなものを持っています:

ここに画像の説明を入力

ここで達成しようとしている機能は、「50 のうち 1 ～ 15 を表示」です (これらは 1 ページの項目であり、50 は json オブジェクト内の項目の総数です)。

jquery simplepagination を使用して上記の添付機能を実装する方法は次のとおりです。

var items = $("table tbody tr");
var numItems = items.length; //total items
var perPage = 10; //per page
var startindex = 15;
totalPages = ceil(numItems / perPage);
currentPage = ceil(startindex / perPage);
items.slice(perPage).hide();
$(".pagination-page").pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",
    onPageClick: function (pageNumber) {
        var showFrom = perPage * (pageNumber - 1);
        var showTo = showFrom + perPage;

        items.hide().slice(showFrom, showTo).show();
    }
});

上記のコードを使用すると、<prev> and <next>ボタンを機能させ、それに応じてレコードを表示できます。ただし、jquery を使用して現在のレコード範囲 (1 ～ 15) を表示する方法がわかりません。

4

1 に答える 1

1

それはあなたに役立つはずですhttp://plnkr.co/edit/3elrtkqzChAnHCal9Fg1?p=preview

JS:

   $(function() {
  var items = $("table tbody tr");
  var numItems = items.length-1; //total items
  var perPage = 3; //per page
  var startindex = 0;
  totalPages = Math.floor(numItems / perPage);
  currentPage = Math.ceil(startindex / perPage);
  $('.pagination-info').text("from " + (startindex + 1) + " to " + (perPage * (startindex + 1)));


  items.slice(perPage + 1).hide();
  $(".pagination-page").pagination({
    items: numItems,
    itemsOnPage: perPage,
    cssStyle: "light-theme",

    onPageClick: function(pageNumber) {

      var showFrom = ((pageNumber-1)  * perPage)+1;
      var showTo = (showFrom + perPage) ;

      $('.pagination-info').text("from " + (showFrom) + " to " + ((showTo-1)>numItems ? numItems :(showTo-1) ));

      items.hide().slice(showFrom, showTo).show();
    }
  });
});

HTML :

スパンを追加するだけ

<span class="pagination-info"></span>
于 2014-07-09T21:43:08.967 に答える