局部刷新的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="";
if(checkboxRow.toString()=="true")
{
initHeadLine+='""+tableHeadName[i]+" ";
}
initHeadLine+=" ";
$("#"+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"";
if(checkboxRow.toString()=="true")
{
initDataLine+='"+ctime+" ";
continue;
}
initDataLine+=""+tableData[i][filedName]+" ";
}
initDataLine+=" ";
$("#"+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="'"+colspanCell+"' align='center' id='tableFootInfo'> 1;
$("#"+footInfoID).append("下一页");
}
else
{
$("#"+footInfoID).append("下一页");
}
}
/**
* [不可调用]渲染 末页 方法
*/
function showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow)
{
if(page!=pageCount && pageCount!=0)
{
page=pageCount;
$("#"+footInfoID).append("末页");
}
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"kid");
var ids="";
var boxIDS="";
for(var i=0;iif(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" %>
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
"Content-Type" content="text/html; charset=UTF-8">
列表
"button" value="添加" οnclick="insert();"/>
"button" value="修改" οnclick="update();"/>
"button" value="删除" οnclick="del();"/>
"1" id="bookTable">
结束语
光有骤然而至的冲动和百折不饶的顽强精神还不是生活，生活还包括了妥协和忘却。