JQuery Datatables Dom 和 Language 参数详细说明

最新推荐文章于 2021-01-14 09:57:18 发布

原创最新推荐文章于 2021-01-14 09:57:18 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

前端Datatable插件技术应用专栏收录该内容

2 篇文章

订阅专栏

本文介绍了DataTables插件的布局定义与语言设置方法。详细解释了如何通过DOM配置来控制表格元素的显示顺序，包括每页显示行数、检索条件等控件，并展示了如何自定义语言设置以适应不同地区的需求。

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说明

数据表的文言设置。

参数文档：

{
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

Example：

没有检索元素

/* Results in:
    <div class="wrapper">
      {length}
      {processing}
      {table}
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": 'lrtip'
} );

简单的DIV和样式元素设置

/* Results in:
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
$('#example').dataTable( {
  "dom": '<"wrapper"flipt>'
} );

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

/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );

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

/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

实际应用

/**

<style>

.float_left{

float: left;

}

.float_right {

float:right;

}

</style>

*/
	$('#dealsData').dataTable(
		{
			'dom': '<"float_left"f>r<"float_right"l>tip',
	        'language': {
	        	'emptyTable': '没有数据',
	        	'loadingRecords': '加载中...',
	        	'processing': '查询中...',
	        	'search': '检索:',
	            'lengthMenu': '每页 _MENU_ 件',
	            'zeroRecords': '没有数据',
	            'paginate': {
	                'first':      '第一页',
	                'last':       '最后一页',
	                'next':       '',
	                'previous':   ''
	            },
	            'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',
	            'infoEmpty': '没有数据',
	            'infoFiltered': '(过滤总件数 _MAX_ 条)'
	        }
		}
	);

效果图片