使用 javascript/jquery 生成页码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2523075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate page numbers using javascript/jquery?
提问by bala3569
How to generate page numbers like the below using javascript/jquery?
如何使用 javascript/jquery 生成如下所示的页码？
If the 5 th page is selected i have to show 3,4 and 6,7 and also 1,last page with prev,next... Any suggestion....
如果选择了第 5 页，我必须显示 3,4 和 6,7 以及 1,last page with prev,next... 任何建议....
EDIT:
编辑：
How to work with json data that use these pagination div? (ie) My json data contains 50 records I want to 10 in page 1 and so on... How to paginate json data with these numbers...
如何处理使用这些分页 div 的 json 数据？（即）我的 json 数据包含 50 条记录，我想在第 1 页中添加 10 条，依此类推...如何使用这些数字对 json 数据进行分页...
I want a jquery function to pass currentpageno,lastpagenumberand the function should generate me page numbers like the below for me
我想要一个 jquery 函数来传递currentpageno,lastpagenumber，该函数应该为我生成如下所示的页码
If it is the first page
如果是第一页
If it is in the middle,
如果在中间，
If it is the last page,
如果是最后一页
Second EDIT:
第二次编辑：
I have tried this function but doesn't seem to get the desired result
我试过这个功能，但似乎没有得到想要的结果
function generatePages(currentPage, LastPage) {
if (LastPage <= 5) {
var pages = '';
for(var i=1;i<=5;i++)
{
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
if (LastPage > 5) {
var pages = '';
for (var i = 1; i <= 5; i++) {
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
}
I have the lastPageand currentPagevalues please help me out getting this...
我有lastPage和currentPage价值观，请帮我解决这个问题...
回答by Leo
What you are looking for is called "pagination" and there's (as always) a jQuery plugin that does the job for you:
您正在寻找的称为“分页”，并且（一如既往）有一个 jQuery 插件可以为您完成这项工作：
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Download it here)
（在这里下载）
Edit:Since you don't seem to be able to get it working, here is one way (of several different) how you can use the plugin.
编辑：由于您似乎无法使其正常工作，因此这是一种（几种不同的）使用插件的方法。
Step 1:Generate markup from your JSON-data like the following:
第 1 步：从您的 JSON 数据生成标记，如下所示：
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2is to implement this function, for instance:
这个想法是在单击页面链接时将相应的记录复制到显示 div。因此，该插件提供了一个 pageSelect 回调函数。第二步是实现这个功能，例如：
function pageselectCallback(pageIndex, jq){
// Clone the record that should be displayed
var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
// Update the display container
$('#display').empty().append(newContent);
return false;
}
This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.
这意味着每条记录只有一页。如果你想每页显示多条记录，你必须相应地修改上面的函数。
The third and final stepis to initialize the whole thing correctly.
第三步也是最后一步是正确初始化整个事情。
function initPagination() {
// Hide the records... they shouldn't be displayed
$("#hiddenData").css("display", "none");
// Get the number of records
var numEntries = $('#hiddenData div.result').length;
// Create pagination element
$("#pagination").pagination(numEntries, {
num_edge_entries: 2,
num_display_entries: 8, // number of page links displayed
callback: pageselectCallback,
items_per_page: 1 // Adjust this value if you change the callback!
});
}
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
因此，您只需从 JSON 数据生成 HTML 标记，然后调用 init 函数。
It's not that difficult, is it?
没那么难，是吗？
回答by mschmidt42
yeah @SLaks is right. nothing too crazy here. You will have 2 variables currentPageNumber and lastPageNumber.
是的，@SLaks 是对的。这里没什么太疯狂的。您将有 2 个变量 currentPageNumber 和 lastPageNumber。
$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
$("div.paginator").append("<a...>"+ x +"</a>");
}
$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");
// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to
回答by naugtur
回答by Navoneel Talukdar
Add two new hidden inputs
添加两个新的隐藏输入
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
Next add an empty div to create pagination controls
接下来添加一个空的div来创建分页控件
<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}
