query 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 = "&nbsp;";

                       }

                       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 += "首頁&nbsp;&nbsp;上一頁&nbsp;&nbsp;";

                }else{

                    pagerHtml += "<a href='###' onclick='firstPage();'>首頁</a>&nbsp;&nbsp;<a href='###' onclick='prePage();'>上一頁</a>&nbsp;&nbsp;";

                }

                

                if(currentPage == totalPages ||  totalCounts <= 0){

                    pagerHtml += "下一頁&nbsp;&nbsp;尾頁&nbsp;&nbsp;";

                }else{

                    pagerHtml += "<a href='###' onclick='nextPage();'>下一頁</a>&nbsp;&nbsp;<a href='###' onclick='lastPage();'>尾頁</a>&nbsp;&nbsp;";

                }

                

                var inputIsDisable = "";

                var countFrom = "";

                if(totalCounts <= 0){

                inputIsDisable = "disabled = 'disabled'";

                }else{

                var dataCounts = (currentPage-1)*pageSize + pageSize;

                countFrom = "&nbsp;&nbsp;第" + ((currentPage-1)*pageSize + 1) + " - " + ( dataCounts >= totalCounts?totalCounts:dataCounts) + "條&nbsp;&nbsp;"

                }

                

                pagerHtml += "當前第<input style='text-align:center' id='searchPageInput' "+ inputIsDisable +" onkeypress='searchPage(event);' type='text' value='"+currentPage+"'/>  頁&nbsp;總"+totalPages+"頁 &nbsp;"+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;

};

}

效果圖以下：