用jquery写一个分页
时间: 2024-03-09 07:38:56 浏览: 59
使用jquery实现的分页
的插件应该怎么做?
好的,关于分页的jquery插件,可以通过以下的代码来实现:
```
/* create a jQuery plugin */
(function($) {
/* define the pager function */
$.fn.pager = function(options) {
/* create some defaults, extending them with any options that were provided */
var settings = $.extend({
items_per_page: 10,
current_page: 0,
num_items: 0,
num_display_entries: 10,
num_edge_entries: 0,
link_to: "#",
prev_text: "Prev",
next_text: "Next",
ellipse_text: "...",
prev_show_always: true,
next_show_always: true,
callback: function() {
return false;
}
}, options);
return this.each(function() {
/* create a basic structure for the pager */
var pager_html = "<div class='pager'>";
var num_pages = Math.ceil(settings.num_items / settings.items_per_page);
/* calculate start and end point of the pager */
var start = settings.current_page > settings.num_display_entries ? settings.current_page - settings.num_display_entries + 1 : 0;
var end = Math.min(num_pages, start + settings.num_display_entries);
/* create the links for the pagination */
if (settings.prev_show_always || settings.current_page > 0) {
pager_html += "<a href='" + settings.link_to + "' class='prev'>" + settings.prev_text + "</a>";
}
/* create the "..." ellipsis if needed */
if (start > 0 && settings.num_edge_entries > 0) {
var endEllipsis = Math.min(settings.num_edge_entries, start);
for (var i = 0; i < endEllipsis; i++) {
pager_html += "<a href='" + settings.link_to + "' class='num'>" + (i + 1) + "</a>";
}
if (settings.num_edge_entries < start) {
pager_html += "<span class='ellipse'>" + settings.ellipse_text + "</span>";
}
}
/* loop through the visible pages */
for (var i = start; i < end; i++) {
pager_html += "<a href='" + settings.link_to + "' class='num " + (i == settings.current_page ? 'current' : '') + "'>" + (i + 1) + "</a>";
}
/* create the "..." ellipsis if needed */
if (end < num_pages && settings.num_edge_entries > 0) {
if (num_pages - settings.num_edge_entries > end) {
pager_html += "<span class='ellipse'>" + settings.ellipse_text + "</span>";
}
var startEllipsis = Math.max(num_pages - settings.num_edge_entries, end);
for (var i = startEllipsis; i < num_pages; i++) {
pager_html += "<a href='" + settings.link_to + "' class='num'>" + (i + 1) + "</a>";
}
}
/* create the next link */
if (settings.next_show_always || settings.current_page < num_pages - 1) {
pager_html += "<a href='" + settings.link_to + "' class='next'>" + settings.next_text + "</a>";
}
/* append the pager html to the container element */
$(this).html(pager_html);
/* bind the click event to the pagination links */
$(".num, .prev, .next", $(this)).click(function(e) {
var new_current = $(this).hasClass('prev') ? settings.current_page - 1 : ($(this).hasClass('next') ? settings.current_page + 1 : parseInt($(this).text()) - 1);
/* prevent default link click behavior */
e.preventDefault();
/* call the callback function */
settings.callback(new_current);
});
});
};
})(jQuery);
```
这个代码会创建一个名为“pager”的jQuery插件,通过该插件可以轻松地实现分页功能。您可以自定义选项来调整插件的行为,比如每页显示的记录数,以及要显示的页面链接数。另外,该插件还支持“上一页”和“下一页”按钮,以及“…”省略号,从而提供更方便的分页导航方式。
阅读全文