(一)splitPage.js分页插件
直接copy就能使用
<code class="language-python hljs has-numbering">/*** * 功能:局部刷新分页显示表格内容 * 作者:JML * 版本:<span class="hljs-number">1.0</span> * 备注:自己封装的局部刷新分页插件,主要是想了解一下分页插件是如何运作的 * 缺陷:水平有限,插件很不灵活,还有两个硬编码块 * 建议:大家还是下载专门的js分页插件来进行使用吧(本代码可供参考) */ /** * 帮助文档: * <span class="hljs-number">1.</span>结合jQuery.js来进行使用 * <span class="hljs-number">2.</span>提供了两个方法可供调用 * 方法一:splitPage(tableID,tableHeadName,tableData,checkboxRow) * 参数详解[ * tableID:需要用户在jsp页面写一个空的表格并赋予id值 * tableHeadName:表头内容(格式如:[<span class="hljs-string">"图书ID"</span>,<span class="hljs-string">"图书名称"</span>,<span class="hljs-string">"图书价格"</span>,<span class="hljs-string">"入库时间"</span>]) * tableData:数据源(后台查到的list集合[可以是json字符串][也可以是json字符串解析过后的对象数组]) * checkboxRow:boolean类型([true:表示显示多选框][false:不显示多选框]) * ] * * 方法二:getCheckedBoxs() * 返回值详解[ * (null):表示用户没有选择任何一条记录 * (a):表示用户选择了一条记录 * (a,b,c..z):表示用户选择了多条记录 * ] * 友情提示[ * 关于用户到底选择了一条还是多条,可以通过 indexOf(<span class="hljs-string">","</span>)><span class="hljs-number">0</span> 来进行判断 * 即:如果返回的字符串包含<span class="hljs-string">','</span>,就表示有选择了多条记录 * ] * <span class="hljs-number">3.</span>关于硬编码块 * 硬编码块-:initTableData() * 解释[ * 水平有限,遍历集合数据时,只能按照JavaBean里面的属性顺序遍历 * 有(不需要显示的字段)和(需要转换格式的字段),需要用户手动在本方法里面添加<span class="hljs-keyword">if</span>块 * 格式如下: * <span class="hljs-keyword">if</span>(filedName==<span class="hljs-string">"该字段名称"</span>) * { * 具体操作 * <span class="hljs-keyword">continue</span>; * } * ] * 硬编码块二:getBoxValue() * 解释[ * 水平有限,获取用户选择的多选框时,把多选框的值拼成字符串返回 * 默认是把 该多选框的下一个单元格内容的值 赋给多选框 * 用户可以根据需求更改此块,格式如下: * obj.parentNode.nextSibling.firstChild.nodeValue * 当前对象 父元素 下一个兄弟元素 第一个子元素 节点值 * ] * */ /** * [用户可调用]分页方法 */ function splitPage(tableID,tableHeadName,tableData,checkboxRow) { initPageData(tableID,tableHeadName,tableData,checkboxRow); } /** * [不可调用]初始化页面方法(默认第一页,每页<span class="hljs-number">5</span>条) */ function initPageData(tableID,tableHeadName,tableData,checkboxRow) { var page=<span class="hljs-number">1</span>; var pageSize=<span class="hljs-number">5</span>; doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow); } /** * [不可调用]真正分页方法 */ function doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow) { var listCount; var pageCount; <span class="hljs-keyword">if</span>(typeof(tableData)==<span class="hljs-string">"string"</span>) { tableData=tableData.replace(/\%/g,<span class="hljs-string">"\""</span>); tableData=eval(<span class="hljs-string">"("</span>+tableData+<span class="hljs-string">")"</span>); } <span class="hljs-keyword">if</span>(typeof(tableHeadName)==<span class="hljs-string">"string"</span>) { tableHeadName=tableHeadName.split(<span class="hljs-string">","</span>); } listCount=tableData.length; pageCount=parseInt(listCount/pageSize) + (listCount%pageSize==<span class="hljs-number">0</span>?<span class="hljs-number">0</span>:<span class="hljs-number">1</span>); showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow); } /** * [不可调用]渲染 表格 方法 */ function showTableData(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,checkboxRow) { var colspanCell=tableHeadName.length; $(<span class="hljs-string">"#"</span>+tableID+<span class="hljs-string">" tr"</span>).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=<span class="hljs-string">"<tr>"</span>; <span class="hljs-keyword">if</span>(checkboxRow.toString()==<span class="hljs-string">"true"</span>) { initHeadLine+=<span class="hljs-string">'<td><input type="checkbox" id="parent" οnclick="choiceBoxStatus(this);" /></td>'</span>; } <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;i<tableHeadName.length;i++) { initHeadLine+=<span class="hljs-string">"<td>"</span>+tableHeadName[i]+<span class="hljs-string">"</td>"</span>; } initHeadLine+=<span class="hljs-string">"</tr>"</span>; $(<span class="hljs-string">"#"</span>+tableID).append(initHeadLine); } /** * [不可调用]渲染 表格数据 方法 */ function initTableData(tableID,tableData,listCount,page,pageSize,pageCount,checkboxRow) { var firstLine=parseInt((page-<span class="hljs-number">1</span>)*pageSize); var lastLine=parseInt((page-<span class="hljs-number">1</span>)*pageSize)+parseInt(pageSize); <span class="hljs-keyword">if</span>(page==pageCount) { lastLine=firstLine+(listCount-((pageCount-<span class="hljs-number">1</span>)*pageSize)); } <span class="hljs-keyword">for</span>(var i=firstLine;i<lastLine;i++) { var initDataLine=<span class="hljs-string">"<tr>"</span>; <span class="hljs-keyword">if</span>(checkboxRow.toString()==<span class="hljs-string">"true"</span>) { initDataLine+=<span class="hljs-string">'<td><input type="checkbox" name="kid" οnclick="getBoxValue(this);"/></td>'</span>; } <span class="hljs-keyword">for</span>(var filedName <span class="hljs-keyword">in</span> tableData[i]){ <span class="hljs-keyword">if</span>(filedName==<span class="hljs-string">"ctime"</span>) { var ctime=new Date(tableData[i][filedName]); var year = ctime.getFullYear(); var month = ctime.getMonth()+<span class="hljs-number">1</span>;//js从<span class="hljs-number">0</span>开始取 var date = ctime.getDate(); var hour = ctime.getHours(); var minutes = ctime.getMinutes(); var second = ctime.getSeconds(); ctime=year+<span class="hljs-string">"年"</span>+month+<span class="hljs-string">"月"</span>+date+<span class="hljs-string">"日 "</span>+hour+<span class="hljs-string">"时"</span>+minutes +<span class="hljs-string">"分"</span>+second+<span class="hljs-string">"秒"</span>; initDataLine+=<span class="hljs-string">"<td>"</span>+ctime+<span class="hljs-string">"</td>"</span>; <span class="hljs-keyword">continue</span>; } initDataLine+=<span class="hljs-string">"<td>"</span>+tableData[i][filedName]+<span class="hljs-string">"</td>"</span>; } initDataLine+=<span class="hljs-string">"</tr>"</span>; $(<span class="hljs-string">"#"</span>+tableID).append(initDataLine); } } /** * [不可调用]渲染 表格尾行提示 方法 */ function initTableFoot(tableID,tableHeadName,tableData,listCount,page,pageSize,pageCount,colspanCell,checkboxRow) { tableData=JSON.stringify(tableData).replace(/\<span class="hljs-string">"/g,"</span>\%<span class="hljs-string">"); if(checkboxRow.toString()=="</span>true<span class="hljs-string">") { colspanCell=parseInt(colspanCell+1); } var initFootLine="</span><tr><td colspan=<span class="hljs-string">'"+colspanCell+"'</span> align=<span class="hljs-string">'center'</span> id=<span class="hljs-string">'tableFootInfo'</span>></td></tr><span class="hljs-string">"; $("</span><span class="hljs-comment">#"+tableID).append(initFootLine);</span> var footInfoID=<span class="hljs-string">"tableFootInfo"</span>; $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"<select id='tableSize' οnchange='changeTableSize(\""</span>+tableID+<span class="hljs-string">"\",\""</span>+tableHeadName+<span class="hljs-string">"\",\""</span>+tableData+<span class="hljs-string">"\",\""</span>+page+<span class="hljs-string">"\",\""</span>+pageSize+<span class="hljs-string">"\",\""</span>+checkboxRow+<span class="hljs-string">"\");'><option value='5' "</span>+(pageSize==<span class="hljs-number">5</span>?<span class="hljs-string">"selected='selected'"</span>:<span class="hljs-string">""</span>)+<span class="hljs-string">">每页5条</option><option value='10' "</span>+(pageSize==<span class="hljs-number">10</span>?<span class="hljs-string">"selected='selected'"</span>:<span class="hljs-string">""</span>)+<span class="hljs-string">">每页10条</option><option value='15' "</span>+(pageSize==<span class="hljs-number">15</span>?<span class="hljs-string">"selected='selected'"</span>:<span class="hljs-string">""</span>)+<span class="hljs-string">">每页15条</option></select>"</span>+<span class="hljs-string">" "</span>); 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); $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">" "</span>+<span class="hljs-string">"当前是"</span>+page+<span class="hljs-string">"/"</span>+pageCount+<span class="hljs-string">"页"</span>); $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">" "</span>+<span class="hljs-string">"共计"</span>+listCount+<span class="hljs-string">"条数据"</span>); } /** * [不可调用]渲染 首页 方法 */ function showFirstInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { <span class="hljs-keyword">if</span>(page!=<span class="hljs-number">1</span>) { page=<span class="hljs-number">1</span>; $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"<a href='JavaScript:void(0);' οnclick='doSplitPage(\""</span>+tableID+<span class="hljs-string">"\",\""</span>+tableHeadName+<span class="hljs-string">"\",\""</span>+tableData+<span class="hljs-string">"\",\""</span>+page+<span class="hljs-string">"\",\""</span>+pageSize+<span class="hljs-string">"\",\""</span>+checkboxRow+<span class="hljs-string">"\");'>首页</a>"</span>); }<span class="hljs-keyword">else</span> { $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"首页"</span>); } } /** * [不可调用]渲染 上一页 方法 */ function showPrevInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { <span class="hljs-keyword">if</span>(page><span class="hljs-number">1</span>) { page=parseInt(page)-<span class="hljs-number">1</span>; $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"<a href='JavaScript:void(0);' οnclick='doSplitPage(\""</span>+tableID+<span class="hljs-string">"\",\""</span>+tableHeadName+<span class="hljs-string">"\",\""</span>+tableData+<span class="hljs-string">"\",\""</span>+page+<span class="hljs-string">"\",\""</span>+pageSize+<span class="hljs-string">"\",\""</span>+checkboxRow+<span class="hljs-string">"\");'>上一页</a>"</span>); } <span class="hljs-keyword">else</span> { $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"上一页"</span>); } } /** * [不可调用]渲染 下一页 方法 */ function showNextInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { <span class="hljs-keyword">if</span>(page<pageCount) { page=parseInt(page)+<span class="hljs-number">1</span>; $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"<a href='JavaScript:void(0);' οnclick='doSplitPage(\""</span>+tableID+<span class="hljs-string">"\",\""</span>+tableHeadName+<span class="hljs-string">"\",\""</span>+tableData+<span class="hljs-string">"\",\""</span>+page+<span class="hljs-string">"\",\""</span>+pageSize+<span class="hljs-string">"\",\""</span>+checkboxRow+<span class="hljs-string">"\");'>下一页</a>"</span>); } <span class="hljs-keyword">else</span> { $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"下一页"</span>); } } /** * [不可调用]渲染 末页 方法 */ function showLastInfo(tableID,tableHeadName,tableData,page,pageSize,pageCount,footInfoID,checkboxRow) { <span class="hljs-keyword">if</span>(page!=pageCount && pageCount!=<span class="hljs-number">0</span>) { page=pageCount; $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"<a href='JavaScript:void(0);' οnclick='doSplitPage(\""</span>+tableID+<span class="hljs-string">"\",\""</span>+tableHeadName+<span class="hljs-string">"\",\""</span>+tableData+<span class="hljs-string">"\",\""</span>+page+<span class="hljs-string">"\",\""</span>+pageSize+<span class="hljs-string">"\",\""</span>+checkboxRow+<span class="hljs-string">"\");'>末页</a>"</span>); } <span class="hljs-keyword">else</span> { $(<span class="hljs-string">"#"</span>+footInfoID).append(<span class="hljs-string">"末页"</span>); } } /** * [不可调用]改变表格记录条数 */ function changeTableSize(tableID,tableHeadName,tableData,page,pageSize,checkboxRow) { page=<span class="hljs-number">1</span>; pageSize=$(<span class="hljs-string">"#tableSize"</span>).val(); doSplitPage(tableID,tableHeadName,tableData,page,pageSize,checkboxRow); } /** * [不可调用]全选/全不选 */ function choiceBoxStatus(obj) { var boxs=document.getElementsByName(<span class="hljs-string">"kid"</span>); <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;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(<span class="hljs-string">"kid"</span>); var ids=<span class="hljs-string">""</span>; var boxIDS=<span class="hljs-string">""</span>; <span class="hljs-keyword">for</span>(var i=<span class="hljs-number">0</span>;i<boxs.length;i++) { <span class="hljs-keyword">if</span>(boxs[i].checked) { boxIDS+=boxs[i].value+<span class="hljs-string">","</span>; } } ids=boxIDS.substring(<span class="hljs-number">0</span>, boxIDS.length-<span class="hljs-number">1</span>); <span class="hljs-keyword">if</span>(ids.length==<span class="hljs-number">0</span>) { ids=null; } <span class="hljs-keyword">return</span> ids; } /** * ---end--- */</code>
(二)使用帮助
本插件提供了两个方法可被调用
方法一: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页面代码:
<code class="language-python hljs has-numbering"><%<span class="hljs-decorator">@ page language="java" contentType="text/html; charset=UTF-8"</span> pageEncoding=<span class="hljs-string">"UTF-8"</span>%> <%<span class="hljs-decorator">@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %></span> <%<span class="hljs-decorator">@ taglib prefix="format" uri="http://java.sun.com/jsp/jstl/fmt" %></span> <!DOCTYPE html PUBLIC <span class="hljs-string">"-//W3C//DTD HTML 4.01 Transitional//EN"</span> <span class="hljs-string">"http://www.w3.org/TR/html4/loose.dtd"</span>> <html> <head> <meta http-equiv=<span class="hljs-string">"Content-Type"</span> content=<span class="hljs-string">"text/html; charset=UTF-8"</span>> <title>列表</title> <!-- 调用jQuery.js --> <script type=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-string">"<%=request.getContextPath()%>/js/jquery-1.9.1.js"</span>></script> <!-- 调用splitPage.js --> <script type=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-string">"<%=request.getContextPath()%>/js/splitPage.js"</span>></script> <!-- 方法块 --> <script type=<span class="hljs-string">"text/javascript"</span>> $(document).ready(function(){ $.ajax({ type:<span class="hljs-string">"post"</span>, url:<span class="hljs-string">"<%=request.getContextPath()%>/doList.action"</span>, data:{}, dataType:<span class="hljs-string">"json"</span>, success:function(data) { var TableID=<span class="hljs-string">"bookTable"</span>; var TableHeadName=[<span class="hljs-string">"图书ID"</span>,<span class="hljs-string">"图书名称"</span>,<span class="hljs-string">"图书价格"</span>,<span class="hljs-string">"入库时间"</span>]; var TableData=data; var CheckboxRow=true; splitPage(TableID,TableHeadName,TableData,CheckboxRow); } }); }); function insert() { location.href=<span class="hljs-string">"<%=request.getContextPath()%>/toAddPage.action"</span>; } function update() { var result=getCheckedBoxs(); <span class="hljs-keyword">if</span>(result==null) { alert(<span class="hljs-string">"请选择要修改的语句!"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(result.indexOf(<span class="hljs-string">","</span>)><span class="hljs-number">0</span>) { alert(<span class="hljs-string">"您选择了多条语句!"</span>); }<span class="hljs-keyword">else</span> { location.href=<span class="hljs-string">"<%=request.getContextPath()%>/toUpdatePage.action?id="</span>+result; } } function <span class="hljs-keyword">del</span>() { var result=getCheckedBoxs(); <span class="hljs-keyword">if</span>(result==null) { alert(<span class="hljs-string">"请选择要删除的语句!"</span>); }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(result.indexOf(<span class="hljs-string">","</span>)><span class="hljs-number">0</span>) { var pro=confirm(<span class="hljs-string">"请问您是否要删除您选中的多条记录?"</span>); <span class="hljs-keyword">if</span>(pro) { location.href=<span class="hljs-string">"<%=request.getContextPath()%>/doDelAll.action?id="</span>+result; } }<span class="hljs-keyword">else</span> { var pro=confirm(<span class="hljs-string">"请问您是否要删除该记录?"</span>); <span class="hljs-keyword">if</span>(pro) { location.href=<span class="hljs-string">"<%=request.getContextPath()%>/doDel.action?id="</span>+result; } } } </script> </head> <body> <div> <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"添加"</span> οnclick=<span class="hljs-string">"insert();"</span>/> <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"修改"</span> οnclick=<span class="hljs-string">"update();"</span>/> <input type=<span class="hljs-string">"button"</span> value=<span class="hljs-string">"删除"</span> οnclick=<span class="hljs-string">"del();"</span>/> </div> <table border=<span class="hljs-string">"1"</span> id=<span class="hljs-string">"bookTable"</span>></table> </body> </html></code>
结束语
光有骤然而至的冲动和百折不饶的顽强精神还不是生活,生活还包括了妥协和忘却。