JQuery Datatables Dom 和 Language 参数详细说明

http://linleizi.iteye.com/blog/2086435

***********************************

Data Tables: http://datatables.net/

Version: 1.10.0

 

Dom说明

定义表格控件在页面的显示顺序。

每个控件元素在数据表都有一个关联的单个字母。

• l - 每页显示行数的控件
• f - 检索条件的控件
• t - 表格控件
• i - 表信息总结的控件
• p - 分页控件
• r - 处理中的控件

还可以在控件元素外添加DIV和Class，语法如下

• < and > - DIV元素
• <"class" and > - DIV和Class
• <"#id" and > - DIV和ID

Language说明

数据表的文言设置。

参数文档：

 

Js代码  

1. {  
2.     "emptyTable":     "No data available in table",  
3.     "info":           "Showing _START_ to _END_ of _TOTAL_ entries",  
4.     "infoEmpty":      "Showing 0 to 0 of 0 entries",  
5.     "infoFiltered":   "(filtered from _MAX_ total entries)",  
6.     "infoPostFix":    "",  
7.     "thousands":      ",",  
8.     "lengthMenu":     "Show _MENU_ entries",  
9.     "loadingRecords": "Loading...",  
10.     "processing":     "Processing...",  
11.     "search":         "Search:",  
12.     "zeroRecords":    "No matching records found",  
13.     "paginate": {  
14.         "first":      "First",  
15.         "last":       "Last",  
16.         "next":       "Next",  
17.         "previous":   "Previous"  
18.     },  
19.     "aria": {  
20.         "sortAscending":  ": activate to sort column ascending",  
21.         "sortDescending": ": activate to sort column descending"  
22.     }  
23. }  

 

 

 

 

 

Example：

• 没有检索元素

Js代码  

1. /* Results in: 
2.     <div class="wrapper"> 
3.       {length} 
4.       {processing} 
5.       {table} 
6.       {information} 
7.       {pagination} 
8.     </div> 
9. */  
10. $('#example').dataTable( {  
11.   "dom": 'lrtip'  
12. } );  

 

• 简单的DIV和样式元素设置

Js代码  

1. /* Results in: 
2.     <div class="wrapper"> 
3.       {filter} 
4.       {length} 
5.       {information} 
6.       {pagination} 
7.       {table} 
8.     </div> 
9. */  
10. $('#example').dataTable( {  
11.   "dom": '<"wrapper"flipt>'  
12. } );  

•  每页行数，检索条件，分页在表格上面，表信息在表格下面

 

Js代码  

1. /* Results in: 
2.     <div> 
3.       {length} 
4.       {filter} 
5.       <div> 
6.         {table} 
7.       </div> 
8.       {information} 
9.       {pagination} 
10.     </div> 
11. */  
12. $('#example').dataTable( {  
13.   "dom": '<lf<t>ip>'  
14. } );  

 

•  表信息在表上面，检索条件，每页行数，处理中在表下面，并且有清除元素

 

 

Js代码  

1. /* Results in: 
2.     <div class="top"> 
3.       {information} 
4.     </div> 
5.     {processing} 
6.     {table} 
7.     <div class="bottom"> 
8.       {filter} 
9.       {length} 
10.       {pagination} 
11.     </div> 
12.     <div class="clear"></div> 
13. */  
14. $('#example').dataTable( {  
15.   "dom": '<"top"i>rt<"bottom"flp><"clear">'  
16. } );  

 

• 实际应用

 

Js代码  

1. /**  

  <style>

  .float_left{

  float: left;

  }

  .float_right {

  float:right;

  }

  </style>

Js代码  

1. */  
2.     $('#dealsData').dataTable(  
3.         {  
4.             'dom': '<"float_left"f>r<"float_right"l>tip',  
5.             'language': {  
6.                 'emptyTable': '没有数据',  
7.                 'loadingRecords': '加载中...',  
8.                 'processing': '查询中...',  
9.                 'search': '检索:',  
10.                 'lengthMenu': '每页 _MENU_ 件',  
11.                 'zeroRecords': '没有数据',  
12.                 'paginate': {  
13.                     'first':      '第一页',  
14.                     'last':       '最后一页',  
15.                     'next':       '',  
16.                     'previous':   ''  
17.                 },  
18.                 'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',  
19.                 'infoEmpty': '没有数据',  
20.                 'infoFiltered': '(过滤总件数 _MAX_ 条)'  
21.             }  
22.         }  
23.     );  

效果图片

 

• 查看图片附件

分享到：