Datatables之强大的sDom属性的应用

更多datatables在http://dt.thxopen.com/ 欢迎大家来做客

首先看详细介绍：Datatables中文API——基本参数（2）sDom ：这个是用于定义DataTable布局的一个强大的属性，包括分页，显示多少条数据和搜索

接下来要讲的就是：结合日期插件my97实现【时间+datatables自带搜索功能】作为过滤条件的服务器翻页查询
首先看js代码：

1. //初始化datatables
   
2.         oTable =  $('#meterDataExp').dataTable({
   
3.                                          "bProcessing": true, 
   
4.                                          "sScrollX":"100%",
   
5.                                          "bJQueryUI": true,
   
6.                                          "sScrollY": 230,
   
7.                                          "bDestroy":true,
   
8.                                          "iDisplayLength":10,
   
9.                                          //"aaSorting": [[ 2, "desc" ]],//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
   
10.                                          "sScrollXInner": "100%",
    
11.                                          "sPaginationType": "full_numbers",
    
12.                                  "sAjaxSource":"getAllMeterDataInfo.action",
    
13.                                  "sDom":'<"H"f<"WdatePickerStart"><"WdatePickerEnd">r>t<"F"ip>',//在datatables中添加时间控件，最关键的部分
    
14.                                  "bSort": false,
    
15.                                          "bServerSide":true,
    
16.                                          "bLengthChange":false, 
    
17.                                          "fnServerData":retrieveData,//自定义数据获取函数
    
18.                                          "fnServerParams": function ( aoData ) {              //传时间到后台，aoData包含了datatables所有默认服务器参数，这里我额外又增加了两个参数，当我在datatables的搜索框里输入值时，这两个参数也会被同时带过去
    
19.                                                  if($("#endDate").length!=0||$("#startDate").length!=0){  //这样就实现了datatables和my97的结合
    
20.                                                          aoData.push(
    
21.                                                                  {"name":"endDate" ,"value":$("#endDate").val()},
    
22.                                                                  {"name":"startDate","value":$("#startDate").val()}
    
23.                                                           );
    
24.                                                  }else{
    
25.                                                          aoData.push( 
    
26.                                                                  {"name":"endDate" ,"value":strDate},
    
27.                                                                  {"name":"startDate" ,"value":strDate}
    
28.                                                           );
    
29.                                                  }
    
30.                                     },
    
31.                                  "aoColumns": [
    
32.                                          { "mDataProp": "name"},
    
33.                                                 { "mDataProp": "meterNo"},
    
34.                                                 { "mDataProp": "startedNum"},
    
35.                                                 { "mDataProp": "endedNum"},
    
36.                                                 { "mDataProp": "amount"},
    
37.                                                 { "mDataProp": "limitAmount"},
    
38.                                                 { "mDataProp": "state"},
    
39.                                                 { "mDataProp": "readingDate"},
    
40.                                                 { "mDataProp": "dataType"}
    
41.                                         ]
    
42.                                                           
    
43.                       });

复制代码

1. "sDom":'<"H"f<"WdatePickerStart"><"WdatePickerEnd">r>t<"F"ip>',//在datatables中添加时间控件，最关键的部分

复制代码

解释下上面代码的含义，上面代码翻译为html如下：(请参考sDom详细信息看下面代码)代码自己排格式我拍好格式 内容就发不上

1. <div class="hander">f<div class="WdatePickerStart"></div><div class="WdatePickerEnd"></div>r</div>t<div class="footer">ip</div>

复制代码

由于作者只定义了div ，所以我在datatables里面增加了两个div ，当datatables初始化完成后，就可以对这两个div进行操作了，把my97加进去
代码如下：

1. 
   
2. //初始化时间
   
3. var month = initDate.getMonth() + 1;
   
4.         var strDate;
   
5.         if (month < 10) {
   
6.                 month = "0" + month;
   
7.                 strDate = initDate.getFullYear() + "年" + month + "月";
   
8.         }else{
   
9.                 strDate = initDate.getFullYear() + "年" + month + "月";
   
10.         }
    
11. //在datatables中添加时间控件
    
12.     $("#meterDataExp_processing").css("margin","100px auto auto auto").css("left","35%");
    
13.     $(".WdatePickerStart").html("<lable>结束时间：</lable><input type='text' id='endDate' />").css("float","right");
    
14.         $("#endDate").focus(function(){
    
15.                 WdatePicker({dateFmt:'yyyy年MM月'});
    
16.         });
    
17.         $(".WdatePickerEnd").html("<lable>开始时间：</lable><input type='text'  id='startDate' />").css("float","right").css("width","260px");
    
18.         $("#startDate").focus(function(){
    
19.                 WdatePicker({dateFmt:'yyyy年MM月'});
    
20.         });
    
21.         $("#meterDataExp_filter").css("width","250px");
    
22.         //赋默认的时间
    
23.         $("#endDate").val(strDate);
    
24.         $("#startDate").val(strDate);
    
25. 
    

复制代码

后台的action只要定义相应的参数，写上seter geter方法，就可以直接取到值
页面的效果图如下:
 

更多datatables在http://dt.thxopen.com/ 欢迎大家来做客

大家如果在datatables上有更多的使用技巧，欢迎互相交流，互相学习