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

數據表的文言設置。

參數文檔：

 

{
    "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_ 條)'
            }
        }
    );

效果圖片

 

• 查看圖片附件

分享到：