jQuery表格插件datatables用法總結(jié)

更新時(shí)間：2014年09月05日 15:13:44 投稿：shichen2014

這篇文章主要介紹了jQuery表格插件datatables用法,包括分頁、排序等功能,是jQuery表格插件datatables比較基礎(chǔ)的部分知識(shí),需要的朋友可以參考下

DataTables是一個(gè)jQuery的表格插件。這是一個(gè)高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強(qiáng)，這將增加先進(jìn)的互動(dòng)控制，支持任何HTML表格。

官方網(wǎng)站及其下載地址：http:/www.datatables.net

當(dāng)前最新版為1.10.2，讀者可點(diǎn)此本站下載。

其主要特點(diǎn)如下：

1.自動(dòng)分頁處理
2.即時(shí)表格數(shù)據(jù)過濾
3.數(shù)據(jù)排序以及數(shù)據(jù)類型自動(dòng)檢測
4.自動(dòng)處理列寬度
5.可通過CSS定制樣式
6.支持隱藏列
7.易用
8.可擴(kuò)展性和靈活性
9.國際化
10.動(dòng)態(tài)創(chuàng)建表格
11.免費(fèi)的

使用方法：

首先看看如下代碼：

<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">

上述代碼中引入js和css文件?？梢栽赿emo里復(fù)制。注意路徑地址。

接著來看看如下代碼：

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true,  //使用jqueryui 。我用的時(shí)候顯示的不是很好
"sPaginationType": "full_numbers"http://分頁
} );
} );
</script>

</head>
<body id="dt_example">//此處為body的id

<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式寫*
<h1>物品種類管理</h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 別忘了
<thead>
<tr>
<th>物品編號(hào)</th>
<th>物品名稱</th>
<th>物品單位</th>
<th>編輯狀態(tài)</th>
<th>隨便</th>
</tr>
</thead>

<tr class="gradeX">//此處可以是gradeA ,gradeX 等，但是gradeB 隔行換色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</div>    
</div>

上面就能創(chuàng)建出如圖的效果，分頁。排序。等等。

最后講講各各屬性（主要添加的位置）

//$(document).ready(function() {
  //$('#example').dataTable( {//加載
    //"bPaginate": true,//分頁按鈕
    //"bLengthChange": true,//每行顯示記錄數(shù)
    //"bFilter": true,//搜索欄
    //"bSort": true,//排序
    //"bInfo": true,//Showing 1 to 10 of 23 entries 總記錄數(shù)沒也顯示多少等信息
    //"bAutoWidth": true } );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"aaSorting": [[ 4, "desc" ]]//給列表排序 ，第一個(gè)參數(shù)表示數(shù)組 。4 就是css grade那列。第二個(gè)參數(shù)為 desc或是asc
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"aoColumns": [ 
    //  /* Engine */  null, //默認(rèn)
    //  /* Browser */ null,
    //  /* Platform */ { "bSearchable": false, //不可參與搜索
    //           "bVisible":  false },//不可見
    //  /* Version */ { "bVisible":  false },//不可見
    //  /* Grade */  null
    //] } );
//} );

//$(document).ready(function() {
  //$('#example').dataTable({
  //});
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"sDom": '<"top"i>rt<"bottom"flp<"clear">'//這段是自定義布局沒搞明白挺復(fù)雜的。  * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class  * Examples: <"wrapper"flipt>, <lf<t>ip>

  //} );
//} );

//$(document).ready(function() {
//  $('#example').dataTable( {
  //  "bStateSave": true //保存狀態(tài)到cookie *************** 很重要 ， 當(dāng)搜索的時(shí)候頁面一刷新會(huì)導(dǎo)致搜索的消失。使用這個(gè)屬性就可避免了
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( {
    //"sPaginationType": "full_numbers" //分頁，一共兩種樣式 另一種為two_button 是datatables默認(rèn)
  //} );
//} );

//$(document).ready(function() {
  //$('#example').dataTable( { //分頁信息 不是很難理解。
    //"oLanguage": {
      //"sLengthMenu": "Display _MENU_ records per page",
      //"sZeroRecords": "Nothing found - sorry",
      //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
      //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
      //"sInfoFiltered": "(filtered from _MAX_ total records)"
    //}
  //} );
//} )

$(document).ready(function() {
  oTable = $('#example').dataTable({
    "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
    "sPaginationType": "full_numbers"
  });
} );

默認(rèn)的語言是英文的當(dāng)然可以國際化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加個(gè)國際化的文件就可以。名字隨便路徑對(duì)了就可以。我寫的國際化文件內(nèi)容如下，可以直接復(fù)制到txt中使用.

{
"sProcessing": "Bitte warten...",
"sLengthMenu": "顯示_MENU_條 ",
"sZeroRecords": "沒有您要搜索的內(nèi)容",
"sInfo": "從_START_ 到 _END_ 條記錄——總記錄數(shù)為 _TOTAL_ 條",
"sInfoEmpty": "記錄數(shù)為0",
"sInfoFiltered": "(全部記錄數(shù) _MAX_ 條)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst":  "第一頁",
"sPrevious": " 上一頁 ",
"sNext":   " 下一頁 ",
"sLast":   " 最后一頁 "
}
}

這些是datatables的基礎(chǔ)部分。比較容易掌握。

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)的學(xué)習(xí)有所幫助。

您可能感興趣的文章: