前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。
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_ 条)'
- }
- }
- );
效果图片
