jquery datatable 插件

1. /* 
2.          * 调用搜索，搜索参数在fnServerParams中定义 
3.          */  
4.         $("#submitSearch").click( function () {  
5.             oTable.fnFilter();  
6.         } );  
7.           
8.         /* 
9.          * 初始化表格参数 
10.          */  
11.         var oTable = $('#messageList').dataTable( {  
12.             "bProcessing" : false, //DataTables载入数据时，是否显示‘进度’提示  
13.             "bServerSide" : true, //是否启动服务器端数据导入  
14.             //"aLengthMenu" : [10, 20, 50], //更改显示记录数选项  
15.             "iDisplayLength" : 10, //默认显示的记录数  
16.             "bPaginate" : true, //是否显示（应用）分页器  
17.             "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数  
18.             "bSort" : true, //是否启动各个字段的排序功能  
19.             "sDom": "t<'row-fluid'<'span6'i><'span6'p>>",//定义表格的显示方式  
20.             "sPaginationType": "bootstrap",  
21.             "aaSorting" : [[0, "desc"]], //默认的排序方式，第0列，降序排列  
22.             "bFilter" : true, //是否启动过滤、搜索功能  
23.                 "aoColumns" : [{  
24.                     "mData" : "id", //列标识，和服务器返回数据中的属性名称对应  
25.                     "sTitle" : "",//列标题  
26.                     "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
27.                     "bVisible" : false //此列不显示  
28.                     //"sClass" : "hidden"//定义列的class参数，隐藏列也可以通过这种方式设置  
29.                 }, {  
30.                     "mData" : "fromUser",  
31.                     "sTitle" : "发送人",  
32.                     "sWidth":"10%",//定义列宽度，以百分比表示  
33.                     "sDefaultContent" : "",  
34.                 }, {  
35.                     "mData" : "toUser",  
36.                     "sTitle" : "接收人",  
37.                     "sDefaultContent" : "",  
38.                 }, {  
39.                     "mData" : "messaeg_content",  
40.                     "sTitle" : "消息内容",  
41.                     "sDefaultContent" : "",  
42.                     "bSortable":false   //此列不需要排序  
43.                 },  {  
44.                     "mData" : "",  
45.                     "sTitle" : "操作",  
46.                     "sDefaultContent" : "",  
47.                 }],  
48.                 "oLanguage": { //国际化配置  
49.                     "sProcessing" : "正在获取数据，请稍后...",    
50.                     "sLengthMenu" : "显示 _MENU_ 条",    
51.                     "sZeroRecords" : "没有您要搜索的内容",    
52.                     "sInfo" : "从 _START_ 到  _END_ 条记录 总显示记录数为 _TOTAL_ 条",    
53.                     "sInfoEmpty" : "记录数为0",    
54.                     "sInfoFiltered" : "(共显示 _MAX_ 条数据)",    
55.                     "sInfoPostFix" : "",    
56.                     "oPaginate": {    
57.                         "sFirst" : "第一页",    
58.                         "sPrevious" : "上一页",    
59.                         "sNext" : "下一页",    
60.                         "sLast" : "最后一页"    
61.                     }  
62.                 },  
63.                 /* 
64.                 * 修改状态值  
65.                 */  
66.                 "fnRowCallback" : function(nRow, aData, iDisplayIndex) {  
67.                     if (aData.response_type == 'video')  
68.                         $('td:eq(1)', nRow).html('视频回复');  
69.                      
70.                       
71.                     return nRow;  
72.                 },  
73.                 /* 
74.                  * 向服务器传递的参数 
75.                  */  
76.                 "fnServerParams": function ( aoData ) {  
77.                     aoData.push(   
78.                             { "name": "keyword", "value": $("#search-keyword").val() },   
79.                             { "name": "responseType", "value": $("#search-responseType").val() }  
80.                             );  
81.                   },  
82.                  //请求url  
83.                 "sAjaxSource" : basePath+"getCustomResponsePageMessage/"+$("#secret").val(),  
84.                     //服务器端，数据回调处理  
85.                 "fnServerData" : function(sSource, aDataSet, fnCallback) {  
86.                     $.ajax({  
87.                         "dataType" : 'json',  
88.                         "type" : "post",  
89.                         "url" : sSource,  
90.                         "data" : aDataSet,  
91.                         "success" : function(resp){  
92.                             fnCallback(resp);  
93.                         }  
94.                     });  
95.                 }  
96.         });  

97. 以下是服务器返回的参数
    

    [html]  view plain  copy

     print ?

    1. {  
    2.     "iTotalRecords": 10,//本次加载记录数量  
    3.     "iTotalDisplayRecords": 57,//总记录数量  
    4.     "aaData": [  
    5.         {  
    6.             "id": "1",  
    7.             "fromUser": "tom",  
    8.             "toUser": "jack",  
    9.             "content": "hello"  
    10.         },  
    11.         {  
    12.   
    13.             "id": "2",  
    14.             "fromUser": "jack",  
    15.             "toUser": "tom",  
    16.             "content": "how are you"  
    17.   
    18.  }, ... ]}