js局部刷新的分页插件
来源：互联网 发布：linux vi命令显示行号 编辑：程序博客网 时间：2024/04/29 12:24
js局部刷新的分页插件
补上写好的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字符串解析过后的对象数组]checkboxRowboolean类型:[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>参考于好友….
1 0
- 局部刷新的js分页插件
- js局部刷新的分页插件
- 局部刷新的js分页插件
- 局部刷新实现的分页
- 【js局部刷新】js局部刷新代码
- js局部刷新
- 局部刷新加载js
- js局部刷新
- js局部刷新
- AjaxAnyWhere 实现页面局部刷新,局部分页
- AJAX(二)---局部刷新实现分页效果的实现
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- 采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果
- js局部刷新页面时间
- js实现页面局部刷新
- js无刷新分页
- Js实现页面局部刷新的代码一例
- 注册时：js的ajax实现局部刷新验证用户名
- latex sty文件缺失问题
- XML基础学习
- CSS3背景
- 概率计算
- 超冗余机械臂逆运动学
- js局部刷新的分页插件
- 最详细-vc TabCtrol控件的用法（有注释）
- MAC下安装vmware fusion8虚拟机软件
- 栈 求解迷宫
- 公司开发者账户申请
- AccessToken类
- centos6.5环境openldap实战之ldap配置详解及web管理工具lam（ldap-account-manager）使用详解
- MVP架构的理解与实现Demo
- 使用unity自带类行加载.txt 文件
