我正在使用jquery ui simplePagination插件,我正在尝试显示页面上当前记录的数量。
我有这样的事情:
我在这里尝试实现的功能是'显示1-15的50'(这些是一页上的项目,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)。
答案 0 :(得分:0)
这应该可以帮助你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>