JQuery插件datatables相关api

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery插件datatables相关api相关的知识，希望对你有一定的参考价值。

学习可参考：http://www.guoxk.com/node/jquery-datatables

                      http://yuemeiqing2008-163-com.iteye.com/blog/2006942

 

1:导入包：

    URL：http://www.datatables.net/

   分别导入css和js文件

html代码  
  1. <style type="text/css" title="currentStyle">  
  2. @import "css/demo_page.css";  
  3.   
  4. @import "css/demo_table.css";  
  5.   
  6. @import "css/demo_table_jui.css";  
  7. </style>  
  8. <script type="text/javascript" language="javascript"  
  9.     src="js/jquery.js"></script>  
  10.   
  11. <script type="text/javascript" language="javascript"  
  12.     src="js/jquery.dataTables.js"></script>  

 加载

Html代码  
  1. <script type="text/javascript">  
  2.         $(document).ready(function() {  
  3.             $(‘#example‘).dataTable();  
  4.         });  
  5.     </script>  

 表单

Html代码  
  1. <div class="col_2_3_right">  
  2.                 <div class="index_viewport">  
  3.                     <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">  
  4.                         <thead>  
  5.                             <tr>  
  6.                                 <th width="20%">First name</th>  
  7.                                 <th width="20%">Last name</th>  
  8.                                 <th width="35%">City</th>  
  9.                                 <th width="25%">Date</th>  
  10.                             </tr>  
  11.                         </thead>  
  12.                     </table>  
  13.                 </div>  
  14.             </div>  

问题：有时提示找不到datatable方法

原因
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

 从后台ajax得数据重建datatables（表单的id要与json的key一致）

Js代码  
  1. $.ajax({  
  2.                     　　type:‘get‘,//可选get  
  3.                     　　url:‘${projectPath}/search‘,  
  4.                     　　data:{"channelType":$(‘#channelType‘).val(),"channel":$(‘#channel‘).val(),"day":$(‘#day‘).val(),"startTime":$(‘#startTime‘).val(),"endTime":$(‘#endTime‘).val(),"database":$(‘#database‘).val()},  
  5.                     　　dataType:‘text‘,//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等  
  6.                     　　success:function(msg){  
  7.                         var msgObj=JSON.parse(msg);  
  8.                         //重新构建table  
  9.                          $(‘#example‘).dataTable().fnClearTable();   //将数据清除  
  10.                     　    $(‘#example‘).dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //数据必须是json对象或json对象数组  
  11.                     　  
  12.                 　　},  
  13.                     　　error:function(){  
  14.                     　　alert(‘error‘);  
  15.                     　　}  
  16.             })})  

传入的数据

Js代码  
  1. //把服务器返回的数据转成datatable须要的格式  
  2.         function packagingdatatabledata(msgObj){  
  3.             var editHtml="<a class=‘btn‘ data-toggle=‘modal‘ href=‘#modalbackdroptrue‘ >编辑</a>";  
  4.             //var editHtml="<a class=‘btn‘ href=‘#modalbackdroptrue‘ data-toggle=‘modal‘ >编辑</a>";  
  5.             var a=[];  
  6.             var tableName=[‘day‘,‘data‘,‘indata‘,‘edit‘];  
  7.             var banddata=storjson(msgObj[‘data‘]);  
  8.             var bandindata=storjson(msgObj[‘indata‘]);  
  9.             for(var key in banddata){  
  10.                 var tempObj=new Object();  
  11.                 tempObj.day=key;  
  12.                 tempObj.data=banddata[key];  
  13.                 tempObj.indata=bandindata[key];  
  14.                 tempObj.edit=editHtml;  
  15.                 a.push(JSON.parse(JSON.stringify(tempObj,tableName)));  
  16.                 }  
  17.             return a;  
  18.         }  

 传入的是一个对象数组，每个对象代表一行，对象的属性即是列

 

单击时得到某行的值

   须要引入 jquery.dataTables.nightly.js  在附件中有  

Js代码  
  1. $(document).ready(function() {  
  2.     /* Init DataTables */  
  3.     $(‘#example‘).dataTable();  
  4. $(‘#example tbody tr‘).live(‘click‘, function () {  
  5.                 var sTitle;  
  6.                 var nTds = $(‘td‘, this);  
  7.                 var sday = $(nTds[0]).text();  //得到第1列的值  
  8.                 var sout = $(nTds[1]).text();  
  9.                 var sin = $(nTds[2]).text();  
  10.                   
  11.             } );  
  12.   
  13. } );  

   

2：详细配置

Js代码  
  1. var docrTable = $(‘#docrevisontable‘).dataTable({  
  2.             "bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示  
  3.             "bServerSide" : true, //是否启动服务器端数据导入  
  4.             "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
  5.             "bJQueryUI" : true, //是否使用 jQury的UI theme  
  6.             "sScrollY" : 450, //DataTables的高  
  7.             "sScrollX" : 820, //DataTables的宽  
  8.             "aLengthMenu" : [20, 40, 60], //更改显示记录数选项  
  9.             "iDisplayLength" : 40, //默认显示的记录数  
  10.             "bAutoWidth" : false, //是否自适应宽度  
  11.             //"bScrollInfinite" : false, //是否启动初始化滚动条  
  12.             "bScrollCollapse" : true, //是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变  
  13.             "bPaginate" : true, //是否显示（应用）分页器  
  14.             "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数  
  15.             "sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页  
  16.             "bSort" : true, //是否启动各个字段的排序功能  
  17.             "aaSorting" : [[1, "asc"]], //默认的排序方式，第2列，升序排列  
  18.             "bFilter" : true, //是否启动过滤、搜索功能  
  19.                     "aoColumns" : [{  
  20.                         "mDataProp" : "USERID",  
  21.                         "sDefaultContent" : "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错  
  22.                         "bVisible" : false //此列不显示  
  23.                     }, {  
  24.                         "mDataProp" : "USERNAME",  
  25.                         "sTitle" : "用户名",  
  26.                  &nb

    以上是关于JQuery插件datatables相关api的主要内容，如果未能解决你的问题，请参考以下文章

    Datatables快速入门开发--一款好用的JQuery表格插件

    JQuery DataTable 插件列可见性

    jQuery DataTables 仅过滤特定列

    如何在 jQuery DataTables 中完全抑制表头？

    jquery.datatables 分页功能

    jquery.datatable插件如何不自动加载数据?