手撕报表，是我工作以来，改的最恶心的一次需求，本来早该总结记录一下的，最近一直在改BUG，今天在这简单记录下其中的小点，作为自己工作中的经验积累。
主要用jquery和easyui以及核心标签重写了输赢报表的页面，其实感觉是贼鸡儿操蛋的，难度一般，主要是麻烦，涉及到多个table的拼接和替换，还有不同点击事件的传值问题。在这次手撕报表中用到了前台js分页，并不是在后台分页，这一块还有待提高，如果表中数据量不多这个方法还适用，一旦数据量大了之后，在查询的时候就会很慢，导致用户体验并不好，所以说前台js分页适用于数据量不大的页面，这里粘一下前台js分页的方法：
js代码：
//前端页面分页
//pno--页数
//psize--每页显示记录数
//分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
//纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
var
selected = 10;
function
goPage(pno,nums){
//这里的"
tbodyData
"是表格的id
var
itable = document.getElementById(
"tbodyData"
);
var
num = itable.rows.length;
//表格所有行数(所有记录数)
var
totalPage = 0;
//总页数
var
pageSize = nums;
//每页显示行数
//总共分几页
if
((
num/pageSize) > parseInt(num/p
ageSize)){
totalPage=parseInt(num/pageSize)+1;
}
else
{
totalPage=parseInt(num/pageSize);
}
var
currentPage = pno;
//当前页数
var
startRow = (currentPage - 1) * pageSize+1;
//开始显示的行
var
endRow = currentPage * pageSize;
//结束显示的行
endRow = (endRow > num)? num : endRow;
//遍历显示数据实现分页
for
(
var
i=1;i<(num+1);i++){
var
irow = itable.rows[i-1];
if
(i>=startRow && i<=endRow){
irow.style.display =
"table-row"
;
}
else
{
irow.style.display =
"none"
;
}
}
var
pageEnd = document.getElementById(
"pageEnd"
);
var
selStr =
""
;
if
(nums != 10){
switch
(parseInt(nums)) {
case
20:
selStr =
"<select id='nums' style='width: 50px;padding:3px 6px;'onchange=\"changeSize()\">"
+
"<option value='10'>10</option><option selected='selected' value='20'>20</option><option value='30'>30</option></select>"
;;
break
;
case
30:
selStr =
"<select id='nums' style='width: 50px;padding:3px 6px;'onchange=\"changeSize()\">"
+
"<option value='10'>10</option><option value='20'>20</option><option selected='selected' value='30'>30</option></select>"
;
break
;
default
:
break
;
}
}
else
{
selStr =
"<select id='nums' style='width: 50px;padding:3px 6px;'onchange=\"changeSize()\">"
+
"<option selected='selected' value='10'>10</option><option value='20'>20</option><option value='30'>30</option></select>"
;
}
var
tempStr =
"<span>共"
+totalPage+
"页 每页展示条数：</span> "
+selStr;
tempStr +=
" <span>当前页："
+ pno +
"</span>"
;
if
(currentPage>1){
tempStr +=
" <a class='easyui-linkbutton' href=\"#\" onClick=\"goPage("
+1+
","
+selected+
")\">首页</a>"
;
tempStr +=
" <a class='easyui-linkbutton' href=\"#\" onClick=\"goPage("
+(currentPage-1)+
","
+selected+
")\">上一页</a>"
}
if
(currentPage<totalPage){
tempStr +=
" <a class='easyui-linkbutton' href=\"#\" onClick=\"goPage("
+(currentPage+1)+
","
+selected+
")\">下一页</a>"
;
tempStr +=
" <a class='easyui-linkbutton' href=\"#\" onClick=\"goPage("
+(totalPage)+
","
+selected+
")\">尾页</a>"
;
}
document.getElementById(
"barcon"
).innerHTML = tempStr;
}
//监听展示条数事件
function
changeSize(){
selected = $(
'#nums option:selected'
).val();
goPage(1,selected)
};
jsp页面代码：
<
div
id
=
"barcon"
name
=
"barcon"
class
=
"bootom-bar"
></
div
>
然后在页面一加载的时候调用一下分页的函数
$(function(){
//分页
goPage(1,10);
//这里的1和10是分页函数的初值，当前第一页，每页展示10条数据
});
在拼接不同table的时候，我这里并没有直接吧整个table移除掉，我选择只是替换table中的tbody和thead、tfoot，这个要根据具体需要展示的数据来拼接替换，在拼接table的时候用到了
$.each(obj,
function
(key,item){});
这个循环函数，然后要获取list中的某一元素的某一个值就可以直接item.name来获取，最后拼接完语句，用
$(
"#tfootData"①
).append(str②);
来替换掉以前的内容，其中①是需要替换的位置的id，②是需要替换的语句。如果你这里用了前台js分页，需要在替换后调用一下分页的函数。