_002_Bootstrap_jqueryDatatable学习

来自于https://blog.csdn.net/sd4015700/article/details/25714673，感谢作者的无私分享。

使用Ajax对后台进行请求,要求的数据结构以及说明：jquery datatable 1.10.4 分页数据格式

[javascript]   view plain  copy

1. {  
2.     "draw": 2,  
3.     "recordsTotal": 11,  
4.     "recordsFiltered": 11,  
5.     "data": [  
6.         {  
7.             "id": 1,  
8.             "firstName": "Troy",  
9.             "lastName": "Young"  
10.         },  
11.         {  
12.             "id": 2,  
13.             "firstName": "Alice",  
14.             "lastName": "LL"  
15.         },  
16.         {  
17.             "id": 3,  
18.             "firstName": "Larry",  
19.             "lastName": "Bird"  
20.         }  
21.         // ......  
22.     ]  
23. }  

参数解释：

draw:表示请求次数

recordsTotal:总记录数

recordsFiltered:过滤后的总记录数

data:具体的数据对象数组

jquery datatable 1.9.4数据格式

[javascript]   view plain  copy

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.  }, ... ]}    

jquery datatable 1.9.4使用

[javascript]   view plain  copy

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.                 }    

jquery dataTable基本设置的中文注解

[javascript]   view plain  copy

1. {  
2.       "sScrollX": "100%",   //表格的宽度   
3.       "sScrollXInner": "110%",   //表格的内容宽度  
4.       "bScrollCollapse": true,  //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)    
5.       "bPaginate": true,  //是否显示分页  
6.       "bLengthChange": true,  //是否开启分页记录数改变功能  
7.       "bFilter": true, //是否启用搜索栏  
8.       "bSort": true, //是否支持排序功能  
9.       "bInfo": true, //显示表格信息  
10.       "bAutoWidth": false,  //自适应宽度  
11.       "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc  
12.        //aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。   
13.         //对于每一个列对象： sTitle 定义列的标题 sClass 定义列的样式   
14.         //fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。   
15.         //当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。    
16.        "aoColumns": [  
17.           {  "sTitle": "编号", "sClass": "center" },//定义列名  
18.           {  
19.                  "sTitle": "操作",  
20.                  "sClass": "center",  
21.                  "fnRender": function (obj) {  
22.                      return '<a href=\"Details/' + obj.aData[0] + '\">查看详情</a>  <input tag=\"' + obj.aData[0] + '\" type=\"checkbox\" name=\"name\" />';  
23.                   }  
24.                },//自定义列  
25.            {   
26.               "bVisible": true, //不可见  
27.               "bSearchable": false, //参与搜索  
28.            },  
29.           null,  
30.           null  
31.        ], //列设置，表有几列，数组就有几项  
32.        "bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了  
33.        "sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)  
34.        "oLanguage": {  
35.        "sLengthMenu": "每页显示 _MENU_ 条记录",  
36.        "sZeroRecords": "对不起，查询不到任何相关数据",  
37.        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",  
38.        "sInfoEmtpy": "找不到相关数据",  
39.        "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",  
40.        "sProcessing": "正在加载中...",  
41.        "sSearch": "搜索",  
42.        "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt  
43.        "oPaginate": {  
44.               "sFirst":    "第一页",  
45.               "sPrevious": " 上一页 ",  
46.               "sNext":     " 下一页 ",  
47.               "sLast":     " 最后一页 "  
48.           }  
49.        }, //多语言配置  
50.            "ajax" : {  
51.                "url" : "SplitServlet", // 请求地址  
52.                 "type" : "POST", // 请求方式  
53.                 "data" : function(d) {  
54.                      //TODO 此处获取自定义参数，d中包含所有要传递到后台的参数  
55.                      d.myKey = "myValue";  
56.                      d.custom = $('#myInput').val();  
57.                  }  
58.            },  
59.            "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css  
60.        "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]],  //设置每页显示记录的下拉菜单   
61.            "rowCallback" : function(row, data, displayIndex) {  
62.                 //TODO 行加载完毕的回调事件  
63.                 if (data[0] == 'Cedric Kelly') {  
64.                   $(row).addClass('selected');  
65.                 }  
66.             }  
67. }  

事件绑定：

[javascript]   view plain  copy

1. var oTable = $("#tableID").dataTables();  
2. $(oTable).bind( 'draw', functionName );  

事件类型相见：http://datatables.net/docs/DataTables/1.9.4/

datable的数据格式，可以是数组，对象或者自定义格式，非常灵活

如果需要重新加载datatable中的数据则，调用datatable的draw()方法     

[javascript]   view plain  copy

1. var datatable = $('#example').DataTable();  
2. datatable.draw();//执行此方法时，datable会向服务器,重新发送请求,并重画数据表格  

分页连接，不用管，datable会自动组建好(检索参数以及每页显示记录数,从第几条记录开始等都会拼装好,后台只需要根据指定格式接受就可以)

参数格式如下：

columns[0][data]	0
columns[0][name]
columns[0][orderable]	false
columns[0][search][regex]	false
columns[0][search][value]
columns[0][searchable]	false
columns[1][data]	1
columns[1][name]
columns[1][orderable]	true
columns[1][search][regex]	false
columns[1][search][value]
columns[1][searchable]	true
columns[2][data]	2
columns[2][name]
columns[2][orderable]	true
columns[2][search][regex]	false
columns[2][search][value]
columns[2][searchable]	true
columns[3][data]	3
columns[3][name]
columns[3][orderable]	true
columns[3][search][regex]	false
columns[3][search][value]
columns[3][searchable]	true
columns[4][data]	4
columns[4][name]
columns[4][orderable]	true
columns[4][search][regex]	false
columns[4][search][value]
columns[4][searchable]	true
columns[5][data]	5
columns[5][name]
columns[5][orderable]	true
columns[5][search][regex]	false
columns[5][search][value]
columns[5][searchable]	true
custom	wf
draw	2
length	10
myKey	myValue
order[0][column]	0
order[0][dir]	asc
search[regex]	false
search[value]
start	10