插件源代码:

(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分页插件的更多相关文章

  1. 一个强大的jquery分页插件

    点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...

  2. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  3. jQuery 分页插件 jqPagination的使用

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  6. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  7. 20个jQuery分页插件和教程

    1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...

  8. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  9. 自己diy一个jquery分页插件

    js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...

  10. JQuery分页插件封装(源码来自百度,自己封装)

    最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运 ...

随机推荐

  1. Matlab——数值计算——单个代数方程 代数方程组

    方程求解 求解单个代数方程 MATLAB具有求解符号表达式的工具,如果表达式不是一个方程式(不含等 号),则在求解之前函数solve将表达式置成等于0. >> syms a syms b ...

  2. bug大致分类及如何定位

    前端 一.概念:网站的静态页面设计,网站前端工作使用的是html.css.javascript等技术设计网站页面的样式和排版布局,这就是网站前端. 二.Bug类别 1.HTML:出现文本的问题基本都是 ...

  3. Java多线程学习——join方法的使用

    join在线程里面意味着“插队”,哪个线程调用join代表哪个线程插队先执行——但是插谁的队是有讲究了,不是说你可以插到队头去做第一个吃螃蟹的人,而是插到在当前运行线程的前面,比如系统目前运行线程A, ...

  4. 【转载】PHP中foreach的用法

    http://www.php.cn/php-weizijiaocheng-399438.html 很好用的PHP中foreach的用法详解,收藏!

  5. 【R】数据结构

    之前一阵子,在EDX上学习了R语言的一门基础课程,这里做个总结.这门课程主要侧重于R的数据结构的介绍,当然也介绍了它的基本的绘图手段. 工作空间相关 ls() ## character(0) rm(a ...

  6. offsetof与container_of宏分析

    offsetof宏:结构体成员相对结构体的偏移位置 container_of:根据结构体成员的地址来获取结构体的地址 offsetof 宏 原型: #define offsetof(TYPE, MEM ...

  7. linux下定时器的实现

    简介: linux下经常有这样的需求,需要定时轮询执行某种任务,当然,用shell脚本的话,crontab和at就可以满足要求.如果从C语言的角度来看,实现定时器也是一个比较简单的任务,因为具有普遍性 ...

  8. sudo pip install -i http://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple ipython

    sudo pip install -i http://pypi.douban.com/simple/ --trusted-host=pypi.douban.com/simple ipython

  9. 清理Windows图标缓存 | 懒人屋

    原文:清理Windows图标缓存 | 懒人屋 文章背景 这是一个抄袭的文章,原文在参考资料中 运行环境 操作系统:Windows 10 x64(1903) 清理脚本 @echo off rem 关闭W ...

  10. 使用pyenv对python版本管理

     1.使用pyenv进行python版本管理   1.1安装对应的依赖包,如果不安装后续操作可能会因为缺少某一个变量包而出现错误 sudo apt-get install -y make build- ...