一个简单js分页插件,水平有限,大神勿喷.
(一)splitPage.js分页插件
直接copy就能使用:
/*** * 功能:局部刷新分页显示表格内容 * 作者:JML * 版本:1.0 * 备注:自己封装的局部刷新分页插件,主要是想了解一下分页插件是如何运作的 * 缺陷:水平有限,插件很不灵活,还有两个硬编码块 * 建议:大家还是下载专门的js分页插件来进行使用吧(本代码可供参考) */ /** * 帮助文档: * 1.结合jQuery.js来进行使用 * 2.提供了两个方法可供调用 * 方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow) * 参数详解[ * tableID:需要用户在jsp页面写一个空的表格并赋予id值 * tableHeadName:表头内容(格式如:["图书ID","图书名称","图书价格","入库时间"]) * tableData:数据源(后台查到的list集合[可以是json字符串][也可以是json字符串解析过后的对象数组]) * checkboxRow:boolean类型([true:表示显示多选框][false:不显示多选框]) * ] * * 方法二:getCheckedBoxs() * 返回值详解[ * (null):表示用户没有选择任何一条记录 * (a):表示用户选择了一条记录 * (a,b,c..z):表示用户选择了多条记录 * ] * 友情提示[ * 关于用户到底选择了一条还是多条,可以通过 indexOf(",")>0 来进行判断 * 即:如果返回的字符串包含',',就表示有选择了多条记录 * ] * 3.关于硬编码块 * 硬编码块-:initTableData() * 解释[ * 水平有限,遍历集合数据时,只能按照JavaBean里面的属性顺序遍历 * 有(不需要显示的字段)和(需要转换格式的字段),需要用户手动在本方法里面添加if块 * 格式如下: * if(filedName=="该字段名称") * { * 具体操作 * continue; * } * ] * 硬编码块二:getBoxValue() * 解释[ * 水平有限,获取用户选择的多选框时,把多选框的值拼成字符串返回 * 默认是把 该多选框的下一个单元格内容的值 赋给多选框 * 用户可以根据需求更改此块,格式如下: * obj.parentNode.nextSibling.firstChild.nodeValue * 当前对象 父元素 下一个兄弟元素 第一个子元素 节点值 * ] * */ /** * [用户可调用]分页方法 */ function splitPage(tableID,tableHeadName,tableData,checkboxRow) { initPageData(tableID,tableHeadName,tableData,checkboxRow); } /** * [不可调用]初始化页面方法(默认第一页,每页5条) */ function initPageData(tableID,tableHeadName,tableData,checkboxRow) { var page=1; var pageSize=5; doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow); } /** * [不可调用]真正分页方法 */ function doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow) { var listCount; var pageCount; if(typeof(tableData)=="string") { tableData=tableData.replace(/\%/g,"\""); tableData=eval("("+tableData+")"); } if(typeof(tableHeadName)=="string") { tableHeadName=tableHeadName.split(","); } listCount=tableData.length; pageCount=parseInt(listCount/pageSize) + (listCount%pageSize==0?0:1); showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow); } /** * [不可调用]渲染 表格 方法 */ function showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow) { var colspanCell=tableHeadName.length; $("#"+tableID+" tr").remove(); initTableHead(tableID,tableHeadName,checkboxRow); initTableData(tableID,tableData,listCount,page,pageSize,pageCount,checkboxRow); initTableFoot(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,colspanCell,checkboxRow); } /** * [不可调用]渲染 表头 方法 */ function initTableHead(tableID,tableHeadName,checkboxRow) { var initHeadLine="<tr>"; if(checkboxRow.toString()=="true") { initHeadLine+='<td><input type="checkbox" id="parent" onclick="choiceBoxStatus(this);" /></td>'; } for(var i=0;i<tableHeadName.length;i++) { initHeadLine+="<td>"+tableHeadName[i]+"</td>"; } initHeadLine+="</tr>"; $("#"+tableID).append(initHeadLine); } /** * [不可调用]渲染 表格数据 方法 */ function initTableData(tableID,tableData,listCount,page,pageSize,pageCount,checkboxRow) { var firstLine=parseInt((page-1)*pageSize); var lastLine=parseInt((page-1)*pageSize)+parseInt(pageSize); if(page==pageCount) { lastLine=firstLine+(listCount-((pageCount-1)*pageSize)); } for(var i=firstLine;i<lastLine;i++) { var initDataLine="<tr>"; if(checkboxRow.toString()=="true") { initDataLine+='<td><input type="checkbox" name="kid" onclick="getBoxValue(this);"/></td>'; } for(var filedName in tableData[i]){ if(filedName=="ctime") { var ctime=new Date(tableData[i][filedName]); var year = ctime.getFullYear(); var month = ctime.getMonth()+1;//js从0开始取 var date = ctime.getDate(); var hour = ctime.getHours(); var minutes = ctime.getMinutes(); var second = ctime.getSeconds(); ctime=year+"年"+month+"月"+date+"日 "+hour+"时"+minutes +"分"+second+"秒"; initDataLine+="<td>"+ctime+"</td>"; continue; } initDataLine+="<td>"+tableData[i][filedName]+"</td>"; } initDataLine+="</tr>"; $("#"+tableID).append(initDataLine); } } /** * [不可调用]渲染 表格尾行提示 方法 */ function initTableFoot(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,colspanCell,checkboxRow) { tableData=JSON.stringify(tableData).replace(/\"/g,"\%"); if(checkboxRow.toString()=="true") { colspanCell=parseInt(colspanCell+1); } var initFootLine="<tr><td colspan='"+colspanCell+"' align='center' id='tableFootInfo'></td></tr>"; $("#"+tableID).append(initFootLine); var footInfoID="tableFootInfo"; $("#"+footInfoID).append("<select id='tableSize' onchange='changeTableSize(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'><option value='5' "+(pageSize==5?"selected='selected'":"")+">每页5条</option><option value='10' "+(pageSize==10?"selected='selected'":"")+">每页10条</option><option value='15' "+(pageSize==15?"selected='selected'":"")+">每页15条</option></select>"+" "); showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow); showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow); showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow); showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow); $("#"+footInfoID).append(" "+"当前是"+page+"/"+pageCount+"页"); $("#"+footInfoID).append(" "+"共计"+listCount+"条数据"); } /** * [不可调用]渲染 首页 方法 */ function showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { if(page!=1) { page=1; $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>首页</a>"); }else { $("#"+footInfoID).append("首页"); } } /** * [不可调用]渲染 上一页 方法 */ function showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { if(page>1) { page=parseInt(page)-1; $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>上一页</a>"); } else { $("#"+footInfoID).append("上一页"); } } /** * [不可调用]渲染 下一页 方法 */ function showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { if(page<pageCount) { page=parseInt(page)+1; $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>下一页</a>"); } else { $("#"+footInfoID).append("下一页"); } } /** * [不可调用]渲染 末页 方法 */ function showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { if(page!=pageCount && pageCount!=0) { page=pageCount; $("#"+footInfoID).append("<a href='JavaScript:void(0);' onclick='doSplitPage(\""+tableID+"\",\""+tableHeadName+"\",\""+tableData+"\",\""+page+"\",\""+pageSize+"\",\""+checkboxRow+"\");'>末页</a>"); } else { $("#"+footInfoID).append("末页"); } } /** * [不可调用]改变表格记录条数 */ function changeTableSize(tableID,tableHeadName,tableData,page,pageSize,checkboxRow) { page=1; pageSize=$("#tableSize").val(); doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow); } /** * [不可调用]全选/全不选 */ function choiceBoxStatus(obj) { var boxs=document.getElementsByName("kid"); for(var i=0;i<boxs.length;i++) { boxs[i].checked=obj.checked; getBoxValue(boxs[i]); } } /** * [不可调用]给多选框赋值 */ function getBoxValue(obj) { var boxValue=obj.parentNode.nextSibling.firstChild.nodeValue; obj.value=boxValue; } /** * [用户可调用]获取选择的多选框的id字符串 */ function getCheckedBoxs() { var boxs=document.getElementsByName("kid"); var ids=""; var boxIDS=""; for(var i=0;i<boxs.length;i++) { if(boxs[i].checked) { boxIDS+=boxs[i].value+","; } } ids=boxIDS.substring(0, boxIDS.length-1); if(ids.length==0) { ids=null; } return ids; } /** * ---end--- */
(二)使用帮助
本插件提供了两个方法可被调用
方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow)
核心方法:进行局部刷新分页方法二:getCheckedBoxs()
辅助方法:返回 用户所选择的记录id 拼成的字符串
splitPage 参数介绍:
tableID | 需要用户在jsp页面写一个空的表格并赋予id值 |
tableHeadName | 表头内容(格式如:[“图书ID”,”图书名称”]) |
tableData | 数据源(后台查到的list集合)[可以是json字符串][也可以是json字符串解析过后的对象数组] |
checkboxRow | boolean类型:[true:表示显示多选框][false:不显示多选框] |
getCheckedBoxs 返回值介绍:
null | 表示用户没有选择任何一条记录 |
a | 表示用户选择了一条记录 |
a,b,c…z | 表示用户选择了多条记录 |
提示:
关于用户到底选择了一条还是多条,可以通过 indexOf(“,”)>0 来进行判断
即:如果返回的字符串包含’,’,就表示有选择了多条记录
(三)使用案例
jsp页面代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="format" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>列表</title> <!-- 调用jQuery.js --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.9.1.js"></script> <!-- 调用splitPage.js --> <script type="text/javascript" src="<%=request.getContextPath()%>/js/splitPage.js"></script> <!-- 方法块 --> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type:"post", url:"<%=request.getContextPath()%>/doList.action", data:{}, dataType:"json", success:function(data) { var TableID="bookTable"; var TableHeadName=["图书ID","图书名称","图书价格","入库时间"]; var TableData=data; var CheckboxRow=true; splitPage(TableID,TableHeadName,TableData,CheckboxRow); } }); }); function insert() { location.href="<%=request.getContextPath()%>/toAddPage.action"; } function update() { var result=getCheckedBoxs(); if(result==null) { alert("请选择要修改的语句!"); }else if(result.indexOf(",")>0) { alert("您选择了多条语句!"); }else { location.href="<%=request.getContextPath()%>/toUpdatePage.action?id="+result; } } function del() { var result=getCheckedBoxs(); if(result==null) { alert("请选择要删除的语句!"); }else if(result.indexOf(",")>0) { var pro=confirm("请问您是否要删除您选中的多条记录?"); if(pro) { location.href="<%=request.getContextPath()%>/doDelAll.action?id="+result; } }else { var pro=confirm("请问您是否要删除该记录?"); if(pro) { location.href="<%=request.getContextPath()%>/doDel.action?id="+result; } } } </script> </head> <body> <div> <input type="button" value="添加" onclick="insert();"/> <input type="button" value="修改" onclick="update();"/> <input type="button" value="删除" onclick="del();"/> </div> <table border="1" id="bookTable"></table> </body> </html>
欢迎大神指教!
截图效果如下 :
相关推荐
Ajax局部刷新分页
这是一个适配所有浏览器的js分页插件,我一直在用,简单方便轻量,重点是适配所有浏览器,适配所有浏览器,适配所有浏览器
vue分页插件_vue.js分页插件下载
移动端H5-dropload.js分页插件 https://blog.csdn.net/qq_36993916/article/details/113742945
比较基础的JS分页,基于jQuery的插件,写的不好,还望见谅。。
jquery 分页插件,代码少,兼容性好, 兼容ie5,ie6。
20120102 NET+jQuery 实现局部刷新+分页+高亮显示搜索内容 本人收藏了3年的资源 现放出 都是总结了很多系统 软件项目实施过程中的经验的 慢慢积累的
这是一个原生JavaScript分页插件,它不依赖于任何js库即可直接使用
js分页插件,自己下载然后适当修改源码,小巧,2k,3个文件
jQuery.jpage.js分页插件制作分页列表切换动画效果代码
jQuery无刷新分页插件是一款刷新页面不便的分页插件下载。
基于vue2.0分页插件,vue.js分页插件下载源码 一、vue分页插件浏览器适配: 1.支持Chrome所有版本 2.支持Firefox所有版本 3.支持Safari所有版本 4.支持IE11及以上版本 二、vue分页插件使用教程 import pageination ...
Jquery+Json实现无刷新分页插件
前几天用jquery+display tag 写了一个局部刷新的分页程序,感觉很不方便,所以自己写了分页程序配合jquery 使用, 一共2个例子,比较简单,第一个用java片写的,不需要添加任何的jar包,第二个用jstl写的,需要用2个jar 包, ...
.NET+jQuery 实现局部刷新+分页+高亮显示搜索内容 输入关键字、页数支持 “回车键” 查询。 查询关键字 “红色” 显示。 查询来源的关键字 “紫色” 显示。 可以自定义每页查询的条数。
支持页码跳转
自己写的一个js分页控件.已经封装,可以直接使用. 适合各种用途的分页控制. 如果界面不够美观,只需要修改css即可.
分页插件分页插件分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP 简单分页插件JAVA JSP...
插件描述:基于jQuery的分页插件,配置比较详细。 参考实例:http://www.jq22.com/jquery-info5697