jquery table异步加载数据，包括分页，可以自由定制表格样式

//说明：jquery异步加载列表数据，包括分页
//jsp端调用用法：
//<script type="text/javascript">
// var ctx = "${ctx}";
// $(document).ready(function(){
// initTable();
// });
//
// function initTable(searchData){
// var properties = {
// divId:'tableContent',
// pager:'tablePager',
// pageSize:15,
// url:ctx + "/system/searchSystemLogList.action",
// data:searchData,
// colNames:["登录名","类型","IP地址","日志描述","时间"],
// colModel:[
// {name:'username',width:90,align: 'center'},
// {name:'title',width:120,align: 'center'},
// {name: 'ip', width: 120, align: 'center'},
// {name: 'description',width:200, align: 'left'},
// {name: 'date', width:150,align: 'center'}
// ]
// };
//
// jqTable(properties);
// }
//</script>
// <div id="tableContent"></div>
//<div id="tablePager"></div>

var properties;
var totalPages;
var currentPage;
function jqTable(opts){
properties = opts;
var pageSize = opts.pageSize;//每页显示数量
var pageNo = opts.pageNo;//当前页码
var tableId = opts.divId;//table表格div ID
var pager = opts.pager;//tabel 分页div ID
var url = opts.url; //url
var data = opts.data;//数据搜索
var divWidth = opts.width;//表格可视区域宽度
var divHeight = opts.width;//表格可视区域高度
var tableColModel = opts.colModel;
var tableColNames = opts.colNames;//定义表头
var displayAll = opts.tdDisplayAll;//单元格是否信息是否展示完全

var tableClass = opts.tabelClass;//table表格样式默认值为jqtable
var trEvenRowColor = opts.evenRowColor;//table偶数行样式，默认值：evenRowColor
var trOddRowColor = opts.oddRowColor;//table奇数行样式，默认值：oddRowColor
var trMouseOverColor = opts.mouseOverColor;//table行划过样式，默认值：mouseOverColor
var trMouseClickColor = opts.mouseClickColor;//table选中行样式，默认值：mouseClickColor

if(isBlank(pageSize)){pageSize = 10;}
if(isBlank(displayAll)){displayAll = false;}
if(isBlank(pageNo)){pageNo = 1;}
//表格行样式调整
if(isBlank(tableClass)){tableClass = "jqtable";}
if(isBlank(trEvenRowColor)){trEvenRowColor = "evenRowColor";}
if(isBlank(trOddRowColor)){trOddRowColor = "oddRowColor";}
if(isBlank(trMouseOverColor)){trMouseOverColor = "mouseOverColor";}
if(isBlank(trMouseClickColor)){trMouseClickColor = "mouseClickColor";}

url += "?pagination.pageSize=" + pageSize + "&pagination.pageNo=" + pageNo;

if(!isBlank(data)){url += "&" + data;}

var $table = $("#" + tableId);
$($table).css("overflow","auto");
if(!isBlank(divWidth)){$($table).css("width",divWidth);}
if(!isBlank(divHeight)){$($table).css("height",divHeight);}
$.getJSON( //使用getJSON方法取得JSON数据
url,
function(data){//处理数据 data指向的是返回来的JSON数据
var tableHtml=""; //表单内容

if(data.title != null && data.title != ""){
tableHtml += "<p class='title'>"+data.title+"</p>";
}
tableHtml += "<table width='100%' class='"+tableClass+"' cellpadding='0' cellspacing='0'><thead><tr>";

var theadTd = "";
for(var i=0;i<tableColNames.length;i++){
theadTd += "<th width="+tableColModel[i].width+">"+tableColNames[i]+"</th>";
}
tableHtml += theadTd + "</tr></thead><tbody>";



var tableBody="";//定义表单内容

if(data == null || data == "" || data.totalRecords == 0){
var tip = "没有查询到数据！";
tableBody = "<tr><td colspan='"+tableColNames.length +"'><font color='red'>"+tip+"</font></td></tr>";
}else{
//alert("totalRecords:" + data.totalRecords + " curPage:" + data.curPage + " totalPages:" + data.totalPages);
$(data.dataRows).each(function(i,tableData){ //遍历JSON数据得到所需形式
var trClass = tableData.trColor;//定制每一行显示的显色
if(typeof(trClass) != "undefined"){
tableBody += "<tr class='"+trClass+"'>";
}else{
tableBody += "<tr>";
}

for(var j=0;j<tableColModel.length;j++){
var tdContent = tableData[tableColModel[j].name];
if(tdContent == null || tdContent == "null"){
tdContent = " ";
}
if(typeof(tableColModel[j].align) == "undefined"){
tableBody += "<td>"+tdContent+"</td>";
}else{
var newTdContent = tdContent;
if(!displayAll){
newTdContent = tdContent.length > 45?tdContent.substring(0,45)+"...":tdContent;
}
tableBody += "<td style='word-break:break-all; word-wrap:break-word;text-align:"+tableColModel[j].align+"' title="+tdContent+">"+newTdContent+"</td>";
}
}
tableBody += "</tr>";
});
}

tableHtml += tableBody + "</tbody></table>";
$table.empty();
$table.html(tableHtml);

currentPage = data.curPage;
totalPages = data.totalPages;
var totalCounts = data.totalRecords;
//改变表格背景颜色
if(totalPages >= 1){
changeTableBackground(tableClass,trEvenRowColor,trOddRowColor,trMouseOverColor,trMouseClickColor);
}


//-----------------------------------------------如果不需要分页效果，可以省略此过程---------------------------------------------------
if(typeof(pager) == "undefined"){
return false;
}
//构造分页代码
var $pager = $("#"+pager);
$($pager).css("overflow","auto");
$($pager).css("text-align","center");
if(!isBlank(divWidth)){
$($pager).css("width",divWidth);
}

var pagerHtml = "<table cellpadding='0' cellspacing='0' style='margin:auto'><tr><td>";

if(currentPage == 1 || totalCounts <= 0){
pagerHtml += "首页  上一页  ";
}else{
pagerHtml += "<a href='###' οnclick='firstPage();'>首页</a>  <a href='###' οnclick='prePage();'>上一页</a>  ";
}

if(currentPage == totalPages || totalCounts <= 0){
pagerHtml += "下一页  尾页  ";
}else{
pagerHtml += "<a href='###' οnclick='nextPage();'>下一页</a>  <a href='###' οnclick='lastPage();'>尾页</a>  ";
}

var inputIsDisable = "";
var countFrom = "";
if(totalCounts <= 0){
inputIsDisable = "disabled = 'disabled'";
}else{
var dataCounts = (currentPage-1)*pageSize + pageSize;
countFrom = "  第" + ((currentPage-1)*pageSize + 1) + " - " + ( dataCounts >= totalCounts?totalCounts:dataCounts) + "条  "
}

pagerHtml += "当前第<input style='text-align:center' id='searchPageInput' "+ inputIsDisable +" οnkeypress='searchPage(event);' type='text' value='"+currentPage+"'/> 页 总"+totalPages+"页  "+countFrom+"共 " + totalCounts + "条数据";

pagerHtml +="</td></tr></table>";

$pager.empty();
$pager.html(pagerHtml);
//-----------------------------------------------------------------分页代码结束-----------------------------------------------------------
});
}
//背景色换色
function changeTableBackground(tableClass,trEvenRowColor,trOddRowColor,trMouseOverColor,trMouseClickColor){
$("." + tableClass).each(function(){

$(this).find("tr:even").addClass(trEvenRowColor);
$(this).find("tr:odd").addClass(trOddRowColor);

$(this).find("tbody > tr").bind("mouseout",function(){
$(this).removeClass(trMouseOverColor);
});

$(this).find("tbody > tr").bind("mouseover",function(){
$(this).addClass(trMouseOverColor);
});

var tmp;
$(this).find("tbody > tr").click(function(){
if(tmp != null){tmp.removeClass(trMouseClickColor);}
$(this).addClass(trMouseClickColor);
tmp = $(this);
});
});
}
//首页
function firstPage(){
properties.pageNo = 1;
jqTable(properties);
}
//上一页
function prePage(){
if(currentPage > 1){
properties.pageNo = currentPage - 1;
jqTable(properties);
}

}
//下一页
function nextPage(){
if(currentPage < totalPages){
properties.pageNo = currentPage + 1;
jqTable(properties);
}
}
//尾页
function lastPage(){
properties.pageNo = totalPages;
jqTable(properties);
}
//按给定页码展示数据
function searchPage(event){
if(event.keyCode==13 || window.event.keyCode == 13)
{
var pager = $("#searchPageInput").val();
if(pager == ""){
alert("请填写页码");
return false;
}
var reg = /^[1-9]*[1-9][0-9]*$/;
if(!reg.test(pager)){
alert("页码位数字,请正确填写页码");
return false;
};
if(pager < 1 || pager > totalPages){
alert("页码范围不正确，请正确填写页码");
return false;
}
properties.pageNo = pager;
jqTable(properties);

}
}
//判断字符是否为空
function isBlank(stringVar){
if(typeof(stringVar) == "undefined"|| stringVar == null || stringVar == "" || stringVar == "null"){
return true;
};
}


效果图如下：

[img]http://dl.iteye.com/upload/attachment/0073/1281/b4323b53-cfe6-3eaa-b08e-0e089f40a506.png[/img]