好用的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这三部分的代码创建好后先运 ...
随机推荐
- tensorflow学习之tf.assign
tf.assign(ref, value, validate_shape=None, use_locking=None, name=None), 函数功能是将value赋值给ref ref必须是tf. ...
- 【监控笔记】【3.1】DML(CDC)、DDL(DDL触发器)跟踪数据更改,数据库审计
关键词:数据库审计.DDL审计.DML审计 [监控笔记][3.1]DML(CDC).DDL(DDL触发器)跟踪数据更改 [1]DML(CDC) 2008及以上 https://www.cnblogs. ...
- 拦截器Interceptor和过滤器Filter的区别
(1)过滤器(Filter):当你有一堆东西的时候,你只希望选择符合你要求的某一些东西.定义这些要求的工具,就是过滤器.(理解:就是一堆字母中取一个B) (2)拦截器(Interceptor):在一个 ...
- linux 获取目录中详细信息 -rw-r--r--详解
-rw-r–r– 1 root root 1313 Sep 3 14:59 test.log详解 查询目录中的内容命令 ls [选项] [文件或目录] 选项: -a 显示所有文件.包括隐藏文件 -l ...
- C++ 中的new、malloc、namespace
1,这些新引入的成员想要解决 C 语言中存在的一些问题, 2,动态内存分配: 1,C++ 中的动态内存分配: 1,C++ 中通过 new 关键字进行基于类型的动态内存申请: 1,C 语言中自身不包含动 ...
- arm初识
一.CPU从指令集角度分类 1.1. CISC (X86) 1.1. 1. CISC CPU 指complex instruction set computer复杂指令集CPU 1.1.2. CIS ...
- linux查看端口是否被占用
1.使用lsof lsof -i:端口号查看某个端口是否被占用 2.使用netstat 使用netstat -anp|grep 80
- 一:jvm的五大内存区(内存结构)
jvm五大内存区域(即jvm运行时数据区),描述的是类被加载时,经过解析后,存储到特定的数据区.方法区和堆是所有线程共享的,而栈和计数器是线程私有的.栈处理程序运行的问题,堆处理数据的存储问题.所以才 ...
- 该项目不知道如何运行配置文件 IIS Express。The project doesn’t know how to run the profile IIS Express
原文:该项目不知道如何运行配置文件 IIS Express. 方案1(推荐). 可能原因是:禁用掉Microsft ASP.NET和Web工具扩展和微软Azure的应用程序服务工具扩展,恢复启用即可. ...
- 如何获取图片的base64编码
1.准备一张图片,比如1.gif 2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source 3.使用方法: 注意source获取的一串 ...