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

数据表的文言设置。

参数文档：

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：

• 没有检索元素

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和样式元素设置

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. } );

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

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. } );

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

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. } );

• 实际应用

1. /**

<style>

.float_left{

float: left;

}

.float_right {

float:right;

}

</style>

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. );

效果图片

• 查看图片附件

分享到：