好用的jQuery分页插件
插件源代码:
(function ($) {
$.fn.extend({
smartpaginator: function (options) {
var settings = $.extend({
totalrecords: 0,
recordsperpage: 0,
length: 10,
next: '下一页',
prev: '上一页',
first: '第一页',
last: '最后一页',
go: 'Go',
theme: 'green',
display: 'double',
initval: 1,
datacontainer: '', //data container id
dataelement: '', //children elements to be filtered e.g. tr or div
onchange: null,
controlsalways: false
}, options); return this.each(function () {
var currentPage = 0;
var startPage = 0;
var totalpages = parseInt(settings.totalrecords / settings.recordsperpage);
if (settings.totalrecords % settings.recordsperpage > 0) totalpages++;
var initialized = false;
var container = $(this).addClass('pager1').addClass(settings.theme);
container.find('ul').remove();
container.find('div').remove();
container.find('span').remove();
var dataContainer;
var dataElements;
if (settings.datacontainer != '') {
dataContainer = $('#' + settings.datacontainer);
dataElements = $('' + settings.dataelement + '', dataContainer);
} var list = $('<ul/>'); var btnPrev = $('<div/>').text(settings.prev).click(function () { if ($(this).hasClass('disabled')) return false; currentPage = parseInt(list.find('li a.active').text()) - 1; navigate(--currentPage); }).addClass('btn'); var btnNext = $('<div/>').text(settings.next).click(function () { if ($(this).hasClass('disabled')) return false; currentPage = parseInt(list.find('li a.active').text()); navigate(currentPage); }).addClass('btn'); var btnFirst = $('<div/>').text(settings.first).click(function () { if ($(this).hasClass('disabled')) return false; currentPage = 0; navigate(0); }).addClass('btn'); var btnLast = $('<div/>').text(settings.last).click(function () { if ($(this).hasClass('disabled')) return false; currentPage = totalpages - 1; navigate(currentPage); }).addClass('btn'); var inputPage = $('<input/>').attr('type', 'text').keydown(function (e) {
if (isTextSelected(inputPage)) inputPage.val('');
if (e.which >= 48 && e.which < 58) {
var value = parseInt(inputPage.val() + (e.which - 48));
if (!(value > 0 && value <= totalpages)) e.preventDefault();
} else if (!(e.which == 8 || e.which == 46)) e.preventDefault();
}); var btnGo = $('<input/>').attr('type', 'button').attr('value', settings.go).addClass('btn').click(function () { if (inputPage.val() == '') return false; else { currentPage = parseInt(inputPage.val()) - 1; navigate(currentPage); } }); container.append(btnFirst).append(btnPrev).append(list).append(btnNext).append(btnLast).append($('<div/>').addClass('short').append(inputPage).append(btnGo));
// container.append(btnPrev).append(list).append(btnNext); if (settings.display == 'single') {
btnGo.css('display', 'none');
inputPage.css('display', 'none');
} buildNavigation(startPage); if (settings.initval == 0) settings.initval = 1;
currentPage = settings.initval - 1;
navigate(currentPage);
initialized = true; function showLabels(pageIndex) {
container.find('span').remove();
var upper = (pageIndex + 1) * settings.recordsperpage;
if (upper > settings.totalrecords) upper = settings.totalrecords;
container.append($('<span/>').append($('<b/>').text(pageIndex * settings.recordsperpage + 1)))
.append($('<span/>').text('-'))
.append($('<span/>').append($('<b/>').text(upper)))
.append($('<span/>').text('of'))
.append($('<span/>').append($('<b/>').text(settings.totalrecords)));
} function buildNavigation(startPage) {
list.find('li').remove();
if (settings.totalrecords <= settings.recordsperpage) return;
for (var i = startPage; i < startPage + settings.length; i++) {
if (i == totalpages) break;
list.append($('<li/>')
.append($('<a>').attr('id', (i + 1)).addClass(settings.theme).addClass('normal')
.attr('href', 'javascript:void(0)')
.text(i + 1))
.click(function () {
currentPage = startPage + $(this).closest('li').prevAll().length;
navigate(currentPage);
}));
} showLabels(startPage);
inputPage.val((startPage + 1));
list.find('li a').addClass(settings.theme).removeClass('active');
list.find('li:eq(0) a').addClass(settings.theme).addClass('active');
//set width of paginator var sW = list.find('li:eq(0) a').outerWidth() + (parseInt(list.find('li:eq(0)').css('margin-left')) * 2);
var width = sW * list.find('li').length;
list.css({ width: width });
showRequiredButtons(startPage);
} function navigate(topage) {
//make sure the page in between min and max page count
var index = topage;
var mid = settings.length / 2;
if (settings.length % 2 > 0) mid = (settings.length + 1) / 2;
var startIndex = 0;
if (topage >= 0 && topage < totalpages) {
if (topage >= mid) {
if (totalpages - topage > mid)
startIndex = topage - (mid - 1);
else if (totalpages > settings.length)
startIndex = totalpages - settings.length;
} buildNavigation(startIndex); showLabels(currentPage);
list.find('li a').removeClass('active');
inputPage.val(currentPage + 1);
list.find('li a[id="' + (index + 1) + '"]').addClass('active');
var recordStartIndex = currentPage * settings.recordsperpage;
var recordsEndIndex = recordStartIndex + settings.recordsperpage;
if (recordsEndIndex > settings.totalrecords)
recordsEndIndex = settings.totalrecords % recordsEndIndex;
if (initialized) {
if (settings.onchange != null) {
settings.onchange((currentPage + 1), recordStartIndex, recordsEndIndex);
}
} if (dataContainer != null) {
if (dataContainer.length > 0) {
//hide all elements first
dataElements.css('display', 'none');
//display elements that need to be displayed
if ($(dataElements[0]).find('th').length > 0) { //if there is a header, keep it visible always
$(dataElements[0]).css('display', '');
recordStartIndex++;
recordsEndIndex++;
} for (var i = recordStartIndex; i < recordsEndIndex; i++)
$(dataElements[i]).css('display', '');
}
}
showRequiredButtons();
}
} function showRequiredButtons() {
if (totalpages > settings.length) {
if (currentPage > 0) {
if (!settings.controlsalways) {
btnPrev.css('display', '');
}
else {
btnPrev.css('display', '').removeClass('disabled');
}
}
else {
if (!settings.controlsalways) {
btnPrev.css('display', 'none');
}
else {
btnPrev.css('display', '').addClass('disabled');
}
} if (currentPage > settings.length / 2 - 1) {
if (!settings.controlsalways) {
btnFirst.css('display', '');
} else {
btnFirst.css('display', '').removeClass('disabled');
}
} else {
if (!settings.controlsalways) {
btnFirst.css('display', 'none');
} else {
btnFirst.css('display', '').addClass('disabled');
}
} if (currentPage == totalpages - 1) {
if (!settings.controlsalways) {
btnNext.css('display', 'none');
}
else {
btnNext.css('display', '').addClass('disabled');
}
}
else {
if (!settings.controlsalways) {
btnNext.css('display', '');
}
else {
btnNext.css('display', '').removeClass('disabled');
}
}
if (totalpages > settings.length && currentPage < (totalpages - (settings.length / 2)) - 1) {
if (!settings.controlsalways) {
btnLast.css('display', '');
}
else {
btnLast.css('display', '').removeClass('disabled');
}
}
else {
if (!settings.controlsalways) {
btnLast.css('display', 'none');
}
else {
btnLast.css('display', '').addClass('disabled');
}
};
}
else {
if (!settings.controlsalways) {
btnFirst.css('display', 'none');
btnPrev.css('display', 'none');
btnNext.css('display', 'none');
btnLast.css('display', 'none');
}
else {
btnFirst.css('display', '').addClass('disabled');
btnPrev.css('display', '').addClass('disabled');
btnNext.css('display', '').addClass('disabled');
btnLast.css('display', '').addClass('disabled');
}
}
} function isTextSelected(el) {
var startPos = el.get(0).selectionStart;
var endPos = el.get(0).selectionEnd;
var doc = document.selection;
if (doc && doc.createRange().text.length != 0) {
return true;
} else if (!doc && el.val().substring(startPos, endPos).length != 0) {
return true;
}
return false;
}
});
}
});
})(jQuery);
调用代码:
function loadPager() {
$('#pager').smartpaginator({
totalrecords: total,
recordsperpage: pageSize,
theme: 'green',
controlsalways: true,
onchange: function (newPage) {
pageLoadData(newPage);
}
});
}
好用的jQuery分页插件的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 自己diy一个jquery分页插件
js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...
- JQuery分页插件封装(源码来自百度,自己封装)
最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...
随机推荐
- python3+selenium常用语法汇总
Selenium常用语法总结 一.Selenium常用定位语法 1.元素定位 (1)ID定位元素: find_element_by_id(‘’) (2)通过元素的类名称定位元素: find_eleme ...
- hdu5993/2016icpc青岛L
zz:https://www.cnblogs.com/ytytzzz/p/9674661.html 题意:给一棵树,每次询问删掉两条边,问剩下的三棵树的最大直径点10W,询问10W,询问相互独立 So ...
- python 并发编程 多进程 互斥锁与join区别
互斥锁与join 互斥锁和join都可以把并发变成串行 以下代码是用join实现串行 from multiprocessing import Process import time import js ...
- 第四周总结 and 实验二
课堂总结 一.课堂笔记总览 1.String类两种实例方法区别 String str1 = "hello";String str2 = "hello"; ...
- PostgreSQL dblink使用过程
安装: 进入/root/postgresql-11.2/contrib/dblink make && make install 切换到postgres用户 [root@fce40690 ...
- P1012拼数
这是一道字符串的普及—的题. 输入几组数字,怎样组合起来才可以使最后结果最大.一开始这道题类似于那道删数问题,每次删除递增序列的最后一位,达到最小.而这个题我也是想到了贪心做法,于是想逐位判断,让在前 ...
- Kinect V2入门之数据获取步骤
在Kinect for windows SDK2.0中,获取并处理数据源接口步骤如下: Sensor -> Source -> Reader -> Frame -> Data ...
- [LeetCode] 154. 寻找旋转排序数组中的最小值 II
题目链接 : https://leetcode-cn.com/problems/find-minimum-in-rotated-sorted-array-ii/ 题目描述: 假设按照升序排序的数组在预 ...
- 6-2 如何读写json数据
通过查看help(json.dump)和help(json.dumps)帮助信息,dump是将转换格式到文件对象,而dumps转换格式到字符串. 一.Json.dumps() Json.dumps() ...
- php配置伪静态如何将.htaccess文件转换 nginx伪静态文件
php通常设置伪静态三种情况,.htaccess文件,nginx伪静态文件,Web.Config文件得形式,如何将三种伪静态应用到项目中呢, 1,.htaccess文件 实例 <IfModule ...