js局部刷新的分页插件

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 initDataLin
4000
e="<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">
ae8d
</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>

参考于好友….