首先看详细介绍:Datatables中文API——基本参数(2)sDom:这个是用于定义DataTable布局的一个强大的属性,包括分页,显示多少条数据和搜索
接下来要讲的就是:结合日期插件my97实现【时间+datatables自带搜索功能】作为过滤条件的服务器翻页查询
首先看js代码:
- //初始化datatables
- oTable =$('#meterDataExp').dataTable({
- "bProcessing": true,
- "sScrollX":"100%",
- "bJQueryUI": true,
- "sScrollY": 230,
- "bDestroy":true,
- "iDisplayLength":10,
- //"aaSorting": [[ 2, "desc" ]],//给列表排序 ,第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
- "sScrollXInner": "100%",
- "sPaginationType": "full_numbers",
- "sAjaxSource":"getAllMeterDataInfo.action",
- "sDom":'<"H"f<"WdatePickerStart"><"WdatePickerEnd">r>t<"F"ip>',//在datatables中添加时间控件,最关键的部分
- "bSort": false,
- "bServerSide":true,
- "bLengthChange":false,
- "fnServerData":retrieveData,//自定义数据获取函数
- "fnServerParams": function ( aoData ) { //传时间到后台,aoData包含了datatables所有默认服务器参数,这里我额外又增加了两个参数,当我在datatables的搜索框里输入值时,这两个参数也会被同时带过去
- if($("#endDate").length!=0||$("#startDate").length!=0){//这样就实现了datatables和my97的结合
- aoData.push(
- {"name":"endDate" ,"value":$("#endDate").val()},
- {"name":"startDate","value":$("#startDate").val()}
- );
- }else{
- aoData.push(
- {"name":"endDate" ,"value":strDate},
- {"name":"startDate" ,"value":strDate}
- );
- }
- },
- "aoColumns": [
- { "mDataProp": "name"},
- { "mDataProp": "meterNo"},
- { "mDataProp": "startedNum"},
- { "mDataProp": "endedNum"},
- { "mDataProp": "amount"},
- { "mDataProp": "limitAmount"},
- { "mDataProp": "state"},
- { "mDataProp": "readingDate"},
- { "mDataProp": "dataType"}
- ]
-
- });
复制代码
- "sDom":'<"H"f<"WdatePickerStart"><"WdatePickerEnd">r>t<"F"ip>',//在datatables中添加时间控件,最关键的部分
复制代码
解释下上面代码的含义,上面代码翻译为html如下:(请参考sDom详细信息看下面代码)代码自己排格式我拍好格式 内容就发不上
- <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加进去
代码如下:
-
- //初始化时间
- var month = initDate.getMonth() + 1;
- var strDate;
- if (month < 10) {
- month = "0" + month;
- strDate = initDate.getFullYear() + "年" + month + "月";
- }else{
- strDate = initDate.getFullYear() + "年" + month + "月";
- }
- //在datatables中添加时间控件
- $("#meterDataExp_processing").css("margin","100px auto auto auto").css("left","35%");
- $(".WdatePickerStart").html("<lable>结束时间:</lable><input type='text' id='endDate' />").css("float","right");
- $("#endDate").focus(function(){
- WdatePicker({dateFmt:'yyyy年MM月'});
- });
- $(".WdatePickerEnd").html("<lable>开始时间:</lable><input type='text'id='startDate' />").css("float","right").css("width","260px");
- $("#startDate").focus(function(){
- WdatePicker({dateFmt:'yyyy年MM月'});
- });
- $("#meterDataExp_filter").css("width","250px");
- //赋默认的时间
- $("#endDate").val(strDate);
- $("#startDate").val(strDate);
-
-
复制代码
后台的action只要定义相应的参数,写上seter geter方法,就可以直接取到值
页面的效果图如下:
大家如果在datatables上有更多的使用技巧,欢迎互相交流,互相学习