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");
                    }
                }
            });
}