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說明
數據表的文言設置。
參數文檔:
- {
- "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_ 條)'
- }
- }
- );