javascript分页代码实例分享(js分页)
发布时间:2023-10-11 10:00:57
标签:javascript分页代码,js分页
调用:
var pageChange = function (index) {
var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
}
实现:
pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {
var theOpt = {
barSize: 5, //分页条显示的页码数
barTemplate: "{bar} 共{totalPage}页{totalCount}条 {goto}", //显示模板
autoHide: true, //是否自动隐藏
showFirst: true, //在totalPage>barSize时是自动否显示第一页链接
showLast: true, //在totalPage>barSize时是自动否显示最后一页链接
showGoTo: true, //是否显示GoTo
autoHideGoTo: true //如果太少是否自动隐藏GoTo
};
if (opt) {
if (opt.barSize)
theOpt.barSize = opt.barSize;
if (opt.barTemplate)
theOpt.barTemplate = opt.barTemplate;
if (opt.autoHide == false)
theOpt.autoHide = false;
if (opt.showFirst == false)
theOpt.showFirst = false;
if (opt.showLast = false)
theOpt.showLast = false;
if (opt.showGoTo == false)
theOpt.showGoTo = false;
if (opt.autoHideGoTo == false)
theOpt.autoHideGoTo = false;
}
var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));
if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;
var startPage = 0; //分页条起始页
var endPage = 0; //分页条终止页
var showFirst = true;
var showLast = true;
if (isNaN(pageIndex)) {
pageIndex = 1;
}
pageIndex = parseInt(pageIndex);
if (pageIndex <= 0)
pageIndex = 1;
if (pageIndex * pageSize > totalCount) {
pageIndex = Math.ceil(totalCount / pageSize);
}
if (totalCount == 0) { //如果没数据
document.getElementById(divPager).innerHTML = "";
return "";
}
var totalPage = Math.ceil(totalCount / pageSize);
if (theOpt.autoHide && totalCount <= pageSize) { //自动隐藏
document.getElementById(divPager).innerHTML = "";
return "";
}
if (totalPage <= theOpt.barSize) {
startPage = 1;
endPage = this.totalPage;
theOpt.showLast = theOpt.showFirst = false;
}
else {
if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最前几页时
startPage = 1;
endPage = theOpt.barSize;
theOpt.showFirst = false;
}
else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最后几页时
startPage = totalPage - theOpt.barSize + 1;
endPage = totalPage;
theOpt.showLast = false;
}
else { //中间的页时
startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
endPage = pageIndex + Math.floor(theOpt.barSize / 2);
}
if (totalPage <= (theOpt.barSize * 1.5)) {
theOpt.showLast = theOpt.showFirst = false;
}
}
function _getLink(index, txt) {
if (!txt) txt = index;
return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
}
var barHtml = ""; //分页条
barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一页");
if (theOpt.showFirst) {
barHtml += _getLink(1) + "<span>...</span>";
}
for (var index = startPage; index <= endPage; index++) {
if (index == pageIndex) {
barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
}
else {
barHtml += _getLink(index);
}
}
if (theOpt.showLast) {
barHtml += "<span>...</span>" + _getLink(totalPage);
}
barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一页");
var gotoHtml = ""; //goto框及按钮
if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
var txtid = divPager + "_goIndex";
var indexVal = "document.getElementById(\"" + txtid + "\").value";
gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
}
}
//替换模板
var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
.replace("{totalCount}", totalCount)
.replace("{pageIndex}", pageIndex)
.replace("{totalPage}", totalPage)
.replace("{goto}", gotoHtml);
document.getElementById(divPager).innerHTML = pagerHtml;
return pagerHtml;
};
0
投稿
猜你喜欢
- 在有些情况下,利用try…except来捕捉异常可以起到代替if…else的作用。比如在判断一个链表是否存在环的leetcode题目中,初始
- 默认情况下,IIS 使用端口 80 进行 HTTP 通信。如果除 IIS 以外的某个应用程序正在运行并在使用相同 IP 地址的端口 80,当
- 这周心血来潮,翻看了现在比较流行的几个JS脚本框架的底层代码,虽然是走马观花,但也受益良多,感叹先人们的伟大……感叹是为了缓解严肃的气氛并引
- 在数据库的开发过程中,经常会遇到复杂的业务逻辑和对数据库的操作,这个时候就会用SP来封装数据库操作。如果项目的SP较多,书写又没有一定的规范
- php本身没有提供返回毫秒数的函数,但提供了一个microtime()函数,该函数返回一个array,包含两个元素,一个是秒数,一个是小数表
- 你还没用 jQuery 写过导航菜单? 相信看到这些出色的jQuery导航菜单后,一定会为此而后悔没早点把 jQuery 应用到自己的Web
- 今天碰到这个极度郁闷的报错,搞了大半下午,才发现是ie的问题,忍不住大骂。例子是这样的:页面中有多处能出发菜单,并且菜单出现在触发点的旁边,
- 如果你象作者一样记性不好,那么你可能根本记不住人们的名字。我遇到人时,多半只是点点头,问句“吃了嘛!”,而且期望问候到此为止 。如果还需要表
- 今天有朋友问到如下一则案例,ORA-01114,ORA-27067以及OSD-04026错误同时出现:*** ACTION NAME:()
- 简单计数器代码如下所示:<% Set fs = CreateObject("Scri
- kelon 问:格式如下:s="地,在要,大,奇功,不知,但是,不示"我想把它split分出來,变成数组來循环,但是不知
- 目前为止,我们使用函数时所用的参数都是位置参数,即传入函数的实际参数必须与形式参数的数量和位置对应。而本节将介绍的关键字参数,则可以避免牢记
- Harris 角点检测算法1. 角点角点是水平方向、垂直方向变化都很大的像素。角点检测算法的基本思想:
- 压缩数据库文件可以提高数据库的性能,但是有些时候在压缩数据库时,系统会提醒用户该数据库不能压缩。如果在Access数据库中删除数据库对象,或
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手,它可以使窗口显得清爽整洁而且富有动感,笔者的几个朋友都想在自己的网页中加入类似的东东,经
- <!-- -----------[test]表生成脚本---------------
- 查询一天:select * from table where to_days(column_time) = to_days(now());s
- 下表列出 SQL Server 查询分析器提供的所有键盘快捷方式。活动 快捷方式 书签:清除所有书签。 CTRL-SHIFT-F2
- 什么是 JScript?JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer
- 开启xp_cmdshell: exec sp_configure 'show advance