Datatables之强大的sDom属性的应用

首先看详细介绍：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. ]
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加进去
代码如下：

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

复制代码

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

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

 

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