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

gaoddhan

浏览: 5127 次
性别:
来自: 北京

最近访客更多访客>>

113768799

qq421606162

cnp1110

akalxs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

jquery Ajax

//说明：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='###' onclick='firstPage();'>首页</a>  <a href='###' onclick='prePage();'>上一页</a>  ";
                }

                if(currentPage == totalPages || totalCounts <= 0){
                    pagerHtml += "下一页  尾页  ";
                }else{
                    pagerHtml += "<a href='###' onclick='nextPage();'>下一页</a>  <a href='###' onclick='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 +" onkeypress='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;
};
}

效果图如下：