Jquery.datatables 学习笔记之综述

1、js部分，datatables最重要的部分就在js的输出，除了table框架，都要用js控制，代码如下：

[javascript]  view plain copy

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.     var lastIdx = null;  
4.     var table = $('#itTable').DataTable( {  
5.         "bStateSave": true,//保存客户端搜索条件等状态  
6.         "sPaginationType": "full_numbers",//出现首页、尾页  
7.         "aLengthMenu": [[10, 25, 50,100, -1], ["10条", "25条", "50条","100条", "所有"]],  
8.         "oLanguage" : {//修改语言  
9.             "bAutoWith": true,  
10.             "sProcessing": "正在加载中......",  
11.             "sLengthMenu": "每页显示 _MENU_ 条记录",  
12.             "sZeroRecords": "对不起，查询不到相关数据！",  
13.             "sEmptyTable": "表中无数据存在！",  
14.             "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",  
15.             "sInfoEmpty" : "0 / 0",  
16.             "sInfoFiltered": "数据表中共为 _MAX_ 条记录",  
17.             "sSearch": "搜索",  
18.             "oPaginate": {  
19.                 "sFirst": "首页",  
20.                 "sPrevious": "上一页",  
21.                 "sNext": "下一页",  
22.                 "sLast": "末页"}  
23.         },  
24.         "ajax": {  
25.             "url": "<%=path %>/main/virtual/list",  
26.             "dataType": "json"  
27.         },  
28.         "columns": [  
29.                     { "data": "id" ,orderable: false,"class":"displayNone"},  
30.                     { "data": "所在物理机" },  
31.                     { "data": "虚拟机名称" },  
32.                     { "data": "IP" },  
33.                     { "data": "系统" },  
34.                     { "data": "内存" },  
35.                     { "data": "使用人" },  
36.                     { "data": "创建时间" },  
37.                     { "data": "终止时间" },  
38.                     { "data": "状态" },  
39.                     { "data": "1级部门" },  
40.                     { "data": "2级部门"},  
41.                     { "data": "备注" },  
42.                     { "data": null,orderable: false,  
43.                         /* "mRender":function(data,type,full){//通过回调函数添加button按钮 
44.                             return "<input type='button' οnclick='' value='"+data+"'/>"; 
45.                         }    */  
46.                     },  
47.                       
48.                 ],  
49.         /* "columnDefs": [//可以隐藏某列 
50.             { 
51.                 "targets": [ 0 ], 
52.                 "visible": false, 
53.                 "searchable": false, 
54.                  
55.             }, 
56.             { 
57.                 "targets":[3], 
58.                 "render":function(data,type,row){ 
59.                     return data+"("+row[3]+")"; 
60.                 } 
61.             }, 
62.         ], */  
63.           
64.         dom: 'T<"clear">lfrtip',//自定义布局  
65.         tableTools: {  
66.             "sRowSelect": "os",//选中行高亮  
67.             "aButtons": [//导出等功能  
68.                 "copy",  
69.                 "print",  
70. <code class="js spaces"></code><code class="js plain">                {</code><div class="line number9 index8 alt2"><code class="js spaces">                    </code><code class="js string">"sExtends"</code><code class="js plain">:    </code><code class="js string">"collection"</code><code class="js plain">,</code></div><div class="line number10 index9 alt1"><code class="js spaces">                    </code><code class="js string">"sButtonText"</code><code class="js plain">: </code><code class="js string">"Save"</code><code class="js plain">,</code></div><div class="line number11 index10 alt2"><code class="js spaces">                    </code><code class="js string">"aButtons"</code><code class="js plain">:    [ </code><code class="js string">"csv"</code><code class="js plain">, </code><code class="js string">"xls"</code><code class="js plain">, </code><code class="js string">"pdf"</code> <code class="js plain">]</code></div><div class="line number12 index11 alt1"><code class="js spaces">                </code><code class="js plain">}</code></div>  
71.             ],  
72.             "sSwfPath": "<%=path%>/swf/copy_csv_xls_pdf.swf" ,//配合aButtons   
73.         },  
74.         "fnRowCallback":function(nRow,aData,iDataIndex){ //回调该行   配合columns使用实现自定义button  
75.             var id = $('td', nRow).eq(0).text();  
76.             var ip = $('td', nRow).eq(3).text();  
77.             $('td:eq(-1)',nRow).html('<a class="updateRow">修改</a> '+  
78.             '<a class="delRow" >删除</a>');  
79.             return nRow;  
80.         },    
81.         "createdRow": function ( row, data, index ) {// 初始化行时对数据进行过滤  
82.             if (  new Date() >= new Date($('td', row).eq(8).text()) &&  $('td', row).eq(9).text() =='开机' ) {  
83.                 $('td', row).eq(8).addClass('fontLight');  
84.             }  
85.         },  
86.     } );  
87.     $('#itTable tbody').on( 'click', 'a.updateRow', function () {//点击事件 a.delRow css选择器delrow为class  
88.         var id = $('td', $(this).parents('tr')).eq(0).text();  
89.         var ip = $('td', $(this).parents('tr')).eq(3).text();  
90.         window.open('<%=path%>/main/virtual/updateview?id='+id+'&ip_address='+ip+'&t_name=虚拟机', 'newwindow','width=700,height=500,top=150, left=350,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');  
91.     });  
92.     $('#itTable tbody').on( 'click', 'a.delRow', function () {//点击事件 a.delRow css选择器delrow为class  
93.         // 获取行及删除行  
94.         /* var tr = $(this).parents('tr'); 
95.         var row = table.row(tr); 
96.         row.remove().draw(); 
97.         table.row('.selected').remore().draw(); */  
98.         var id = $('td', $(this).parents('tr')).eq(0).text();  
99.         if(confirm('删除不可恢复，确定删除吗？')){  
100.             $.ajax({  
101.                 type: "POST",  
102.                 url: "<%=path%>/main/virtual/del?id="+id,  
103.                 //data: {id:$("#id").val(), title:$("#title").val(),title_en:$("#title_en").val()},  
104.                 dataType: "html",  
105.                 success: function(data){  
106.                     window.location.href=window.location.href;  
107.                 },  
108.                 error:function(data){  
109.                     alert('删除错误');  
110.                 }  
111.             });  
112.         }  
113.     } );   
114.     //鼠标移动高亮显示  
115.     /* $('#itTable tbody').on( 'mouseover', 'td', function () { 
116.         var colIdx = table.cell(this).index().column; 
117.  
118.         if ( colIdx !== lastIdx ) { 
119.             $( table.cells().nodes() ).removeClass( 'highlight' ); 
120.             $( table.column( colIdx ).nodes() ).addClass( 'highlight' ); 
121.         } 
122.     } ).on( 'mouseleave', function () { 
123.         $( table.cells().nodes() ).removeClass( 'highlight' ); 
124.     } ); */  
125.       
126.       
127.       
128.       
129.       
130.     new $.fn.dataTable.FixedHeader( table );// 顶部固定不动  
131.   
132. } );  
133. </script>  

2、html方面很简单，如下：

[java]  view plain copy

1. <table id="itTable" class="display dataTables" cellspacing="0" width="100%"   align="center"  >  
2.                 <thead >  
3.                     <tr>  
4.                         <th>id</th>  
5.                         <th >所在物理机</th>  
6.                         <th >虚拟机名称</th>  
7.                         <th >IP</th>  
8.                         <th >系统</th>  
9.                         <th >内存</th>  
10.                         <th >使用人</th>  
11.                         <th >创建时间</th>  
12.                         <th >终止时间</th>  
13.                         <th >状态</th>  
14.                         <th >1级部门</th>  
15.                         <th >2级部门</th>  
16.                         <th >备注</th>  
17.                         <th >操作</th>  
18.                     </tr>  
19.                 </thead>  
20.   
21.             </table>