JQuery Datatables Dom 和 Language 参数详细说明

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

Dom说明

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

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

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

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

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

Language说明

数据表的文言设置。

参数文档：

Js代码

{
"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：

没有检索元素

Js代码

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

简单的DIV和样式元素设置

Js代码

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

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

Js代码

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

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

Js代码

/* 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">'
} );

实际应用

Js代码

<style>

.float_left{

float: left;

}

.float_right {

float:right;

}

</style>

Js代码

*/
$('#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_ 条)'
}
}
);

效果图片

JQuery Datatables Dom 和 Language 参数详细说明相关推荐

Jquery.Datatables dom表格定位
Datatables会添加一些控制元素在表格的周围,比如默认状态下改变每页显示条数(l)的空间在左上角,即使搜索框(f)在右上角,表格的信息(i)显示在左下角,分页控件(p)显示在右下角. 这些控件在 ...
JQuery datatables 详细配置以及aoColumns参数
JQuery datatables api $(function(){var docrTable = $('#aaa').dataTable({ "destroy":true, ...
JQuery Datatables Columns API 参数详细说明
Data Tables: http://datatables.net/ Version: 1.10.0 Columns说明虽然我们可以通过DOM直接获取DataTables元素的信息,但是DataT ...
Jquery中AJAX参数详细介绍
转载:http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名类型描述 ur ...
Jquery中AJAX参数详细列表
下面是jQuery中AJAX参数详细列表: 参数名类型描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
jQuery dataTables 的使用
2019独角兽企业重金招聘Python工程师标准>>> jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等 ...
jQuery - （JQuery datatables api 使用解读）
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...

JQuery Datatables Dom 和 Language 参数详细说明

JQuery Datatables Dom 和 Language 参数详细说明相关推荐

最新文章

热门文章