JQuery dataTable插件

DataTables是一個jQuery的表格插件。這是一個高度靈活的工具，依據的基礎逐步增強，這將增加先進的互動控制，支持任何HTML表格。

官方網站及其下載地址：http:/www.datatables.net

其主要特點如下：

1.自動分頁處理
2.即時表格數據過濾
3.數據排序以及數據類型自動檢測
4.自動處理列寬度
5.可通過CSS定制樣式
6.支持隱藏列
7.易用
8.可擴展性和靈活性
9.國際化
10.動態創建表格
11.免費的

html代碼：

<table id="result">
    <thead>
        <th>姓名</th>
        <th>組別</th>
        <th>分單件數</th>
        <th>當前待辦件數</th>
        <th>總實收金額</th>
    </thead>
</table>

 

js代碼：

function queryData(){
    var orgId=$("#orgId").val().trim();
    TableManaged = $('#result')
    .dataTable(
            {
                "bDestroy" : true,// 銷毀
                "bFilter" : false,// 不顯示搜索框
                "bSort" : true, // 排序功能
                "bAutoWidth" : true,
                "sScrollX" : "100%",
                "sScrollXInner" : "3600px",
                "bPaginate" : true,// 分頁功能
                "bInfo" : true,// 信息顯示
                "sAjaxSource" : 'list.json',// 請求url
                "sServerMethod" : "POST",
                "bServerSide" : true, // 異步請求
                "bProcessing" : true,
                "fnServerParams" : function(aoData) {
                    aoData.push({
                        "name" : "orgId",// 組織id
                        "value" : orgId
                    }, {
                        "name" : "userName",// 用戶名
                        "value" : $("#userName").val()
                    });
                },
                "aoColumns" : [
                        {
                            "mData" : "userName",// 姓名
                            "bSortable" : false,
                            "sWidth" : "85px",
                            "sClass" : "txt-center",
                            "mRender" : function(data, type, full) {//data代表了該屬性的值,full表示整行對象（可以通過full.userId獲得該行的其他屬性值）
                                return '<a href="javascript:void(0)" class="userName" onclick="queryDetail('
                                + full.userId+ ')" >' + data + '</a>';
                            }
                        }, {
                            "mData" : "orgName",// 組別
                            "bSortable" : false,
                            "sWidth" : "85px",
                            "sClass" : "txt-center"
                        }, {
                            "mData" : "caseNum",// 分單件數
                            "bSortable" : false,
                            "sWidth" : "85px",
                            "sClass" : "txt-center"
                        }, {
                            "mData" : "caseTodoNum",// 當前待辦件數
                            "bSortable" : false,
                            "sWidth" : "90px",
                            "sClass" : "txt-center"
                        }, {
                            "mData" : "capitalAmount",// 總實收金額
                            "bSortable" : false,
                            "sWidth" : "100px",
                            "sClass" : "txt-center"
                        } ],
　　　　　　　　"aLengthMenu" : [ [ 10, 20, -1 ], [ 10, 20, "全部" ] ],
                        // set the initial value
                        "iDisplayLength" : 10,
                        "sPaginationType" : "bootstrap",
                        "oLanguage" : {
                            "sLengthMenu" : "每頁顯示 _MENU_ 條記錄&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金額單位：元",
                            "sZeroRecords" : "抱歉， 沒有找到！",
                            "sInfo" : "從 _START_ 到 _END_ /共 _TOTAL_ 條數據",
                            "sInfoEmpty" : "顯示 0 至 0 共 0 項",
                            "oPaginate" : {
                                "sFirst":"首頁",
                                "sPrevious": "上一頁",
                                "sNext": "下一頁",
                                "sLast":"尾頁"
                            }
                        },
                // 回調函數
                "fnDrawCallback" : function(oSettings) {
                    $("#query").removeAttr("disabled");
                    $("#result_wrapper .row-fluid").css("margin-top",
                            "10px");
                    var fsv = $(
                            "#result_length select[name='result_length']")
                            .val();
                    if (fsv == "-1" || fsv == -1) {
                        $("#result_wrapper li").addClass("disabled");
                    }
                }
            });
}