DataTables_修改語言爲中文及DOM介紹

效果圖片

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說明
數據表的文言設置。
參數文檔：
 
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_ 條)' 
            } 
        } 
    ); 
效果圖片