首先看详细介绍: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上有更多的使用技巧,欢迎互相交流,互相学习
分享到:
相关推荐
Datatables是一款jQuery表格插件,可以表头排序,内容过滤查询,功能很强大!
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...
用于dataTables 使用dataTables添加行辅助按钮如 修改/删除.
jquery.datatables,异步请求后台数据时,调用api动态合并行。
ssm整合datatables实例Demo,springMVC spring mybatis datatables
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格... 丰富多样的option和强大的API 支持国际化 超过2900+个单元测试 免费开源 ( MIT license )! 商业支持 更多特性请到官网查看
解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题
开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables.bootstrap开发工具 dataTables....
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; ...
jquery datatables离线参考
DataTables examples This DataTables package comes with a number of examples of how you can use this software, and demonstrates it's capabilities and flexibility.
一个简单的datatables模板而已....
官方下载 datatables所需包文件
DataTables导出CVS Excel PDF 打印
laravel-datatables-demo, Laravel 数据表演示应用程序 #Laravel 数据表演示程序Laravel 4 |5的数据表包 这个包是通过使用Eloquent的ORM或者Fluent查询生成器来处理 DataTables插件的服务器端工作的服务器端工作的。...
datatables增删改查,行内编辑等官方源码实例 冒泡编辑,多行编辑、删除,例子超多,官方的实现代码非常精简,可直接引用 datatables.dll,减少了非常多的页面脚本 带数据库SQL文件 vs2015工程
用datatables和bootstrap做的一个表格的demo
DataTables官方源码