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.     );  
效果图片

 

分享到:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值