jQuery表格插件datatables用法詳解

更新時(shí)間：2020年11月23日 15:37:06 作者：SimonMaxs

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

一、Datatables簡(jiǎn)介

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

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

二、如何使用

在做后臺(tái)的時(shí)候并沒(méi)有美工和前端工程師來(lái)配合你做頁(yè)面，為了顯示數(shù)據(jù)并有一定的美感，我們可以使用jQuery的DataTables插件來(lái)幫助我們完成任務(wù)

1、DataTables的默認(rèn)配置

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

2、DataTables的一些基礎(chǔ)屬性配置

 "bPaginate": true, //翻頁(yè)功能 
"bLengthChange": true, //改變每頁(yè)顯示數(shù)據(jù)數(shù)量 
"bFilter": true, //過(guò)濾功能 
"bSort": false, //排序功能 
"bInfo": true,//頁(yè)腳信息 
"bAutoWidth": true//自動(dòng)寬度

3、數(shù)據(jù)排序

$(document).ready(function() { 
$('#example').dataTable( { 
"aaSorting": [ 
[ 4, "desc" ] 
] 
} ); 
} );

從第0列開(kāi)始，以第4列倒序排列
4、隱藏某些列

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumnDefs": [ 
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] }, 
{ "bVisible": false, "aTargets": [ 3 ] } 
] } ); 
} );

5、國(guó)際化

$(document).ready(function() { 
$('#example').dataTable( { 
"oLanguage": { 
"sLengthMenu": "每頁(yè)顯示 _MENU_ 條記錄", 
"sZeroRecords": "抱歉， 沒(méi)有找到", 
"sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數(shù)據(jù)", 
"sInfoEmpty": "沒(méi)有數(shù)據(jù)", 
"sInfoFiltered": "(從 _MAX_ 條數(shù)據(jù)中檢索)", 
"oPaginate": { 
"sFirst": "首頁(yè)", 
"sPrevious": "前一頁(yè)", 
"sNext": "后一頁(yè)", 
"sLast": "尾頁(yè)" 
}, 
"sZeroRecords": "沒(méi)有檢索到數(shù)據(jù)", 
"sProcessing": "<img src='./loading.gif' />" 
} 
} ); 
} );

6、排序功能：

$(document).ready(function() { 
$('#example').dataTable( { 
"aoColumns": [ 
null, 
{ "asSorting": [ "asc" ] }, 
{ "asSorting": [ "desc", "asc", "asc" ] }, 
{ "asSorting": [ ] }, 
{ "asSorting": [ ] } 
] 
} ); 
} );

7、數(shù)據(jù)獲取支持4種：如下

•DOM 文檔數(shù)據(jù)
•Javascript array js數(shù)組
•Ajax source Ajax請(qǐng)求數(shù)據(jù)
•Server side processing 服務(wù)器端數(shù)據(jù)

三、實(shí)例講解

1、需求：如下圖所示，對(duì)datatables的內(nèi)容進(jìn)行添加，編輯，刪除的操作。

2、分析：添加功能---單擊add按鈕，彈出對(duì)話(huà)框，添加新的內(nèi)容。

編輯功能---單擊datatables可以選中一行，此行改變顏色，即是已經(jīng)選中，單擊edit按鈕，彈出dialog，此dialog中的內(nèi)容是我們選中行的內(nèi)容。如果沒(méi)有選中行，點(diǎn)擊edit按鈕，則不會(huì)彈出dialog。當(dāng)雙擊datatables中的某一行時(shí)，也彈出dialog，并且雙擊的行改變顏色，dialog中的內(nèi)容是我們雙擊行的內(nèi)容。

刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要?jiǎng)h除所選內(nèi)容。當(dāng)沒(méi)有選中任何內(nèi)容時(shí)，單擊delete按鈕，不會(huì)彈出警告框，也不會(huì)刪除內(nèi)容。

3、編碼：

Attributes//名稱(chēng)

 <table id="gridtable" class="gridtable">//聲明jquery datatables 
 <thead> 
  <tr> 
  <th>Name 
  </th> 
  <th>Value 
  </th> 
  <th>DisplayOrder 
  </th> 
 </tr> 
 </thead> 
 <tbody> 
 .....//datatables內(nèi)容，此處省略 
 </tbody> 
</table> 
<input type="button" id="add" value="Add" />//添加按鈕 
<input type="button" id="edit" value="Edit" />//編輯按鈕 
<input type="button" id="delete" value="Delete" />//刪除按鈕 
 
 
<div id="e_Attributes">//聲明dialog,異步更新 
 @using (Ajax.BeginForm("Update", "Product", new AjaxOptions 
{ 
 UpdateTargetId = "d_Attributes", 
 OnSuccess = "dialogClose", 
 HttpMethod = "Post", 
})) 
 { 
 <table> 
  <tbody> 
  <tr>    
   <td>Name</td> 
   <td> 
   <input id="name" name="Name" type="text" style="width:250px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td>Value</td> 
   <td> 
   <input id="value" name="Value" type="text" style="width:250px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td>DisplayOrder</td> 
   <td> 
   <input id="displayOrder" name="DisplayOrder" type="text" style="width:128px" class="required"/>*</td> 
  </tr> 
  <tr> 
   <td> 
   <input id="submit" type="submit" name="submit" value="Submit" /> 
   <input id="hiddenValue" type="hidden" name="hiddenValue" /> 
   </td> 
  </tr> 
  </tbody> 
 </table> 
 } 
</div>

上面代碼說(shuō)明：這段代碼主要分了兩個(gè)部分，第一部分是jquery datatables的聲明，<table id="gridtable" class="gridtable">；第二部分是dialog的聲明，以及操作所需要的action，此部分的操作選擇ajax無(wú)刷新頁(yè)面技術(shù)。所需js的代碼：

<script type="text/javascript"> 
 function dialogClose() { 
  $("#e_Attributes").dialog("close"); 
 } 
 
 $("#e_Attributes").dialog({ 
  modal: true, 
  autoOpen: false, 
  show: { 
  effect: "blind", 
  duration: 1000 
  }, 
  hide: { 
  effect: "explode", 
  duration: 1000 
 }, 
 width: 400 
 }); 
 
 var editor; 
 
 $(function () { 
 //聲明datatable 
  $("#gridtable").dataTable().fnDestroy(); 
  editor = $('#gridtable').dataTable({ 
  "bInfo":false, 
  "bServerSide": false, 
  'bPaginate': false,   //是否分頁(yè)。 
  "bProcessing": false,   //當(dāng)datatable獲取數(shù)據(jù)時(shí)候是否顯示正在處理提示信息。 
  'bFilter': false,   //是否使用內(nèi)置的過(guò)濾功能。 
  'bLengthChange': false,   //是否允許用戶(hù)自定義每頁(yè)顯示條數(shù)。 
  'sPaginationType': 'full_numbers', //分頁(yè)樣式 
  }); 
 //單擊，賦值，改樣式 
 $("#gridtable tbody tr").click(function (e) { 
  if ($(this).hasClass('row_selected')) { 
  $(this).removeClass('row_selected'); 
  putNullValue() 
  } 
  else { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  $(this).addClass('row_selected'); 
  var aData = editor.fnGetData(this); 
  if (null != aData) { 
   putValue(aData); 
  } 
  } 
 }); 
 //雙擊 
 $("#gridtable tbody tr").dblclick(function () { 
  if ($(this).hasClass('row_selected')) { 
  //$(this).removeClass('row_selected'); 
  } 
  else { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  $(this).addClass('row_selected'); 
  } 
 
  var aData = editor.fnGetData(this); 
  if (null != aData) { 
  putValue(aData); 
  } 
 
  $("#hiddenValue").val("edit"); 
  $("#e_Attributes").dialog("open"); 
 
 }); 
 //添加 
 $("#add").click(function () { 
  editor.$('tr.row_selected').removeClass('row_selected'); 
  putNullValue(); 
 
  $("#hiddenValue").val("add"); 
  $("#e_Attributes").dialog("open"); 
 }); 
 //編輯 
 $("#edit").click(function () { 
  var productAttributeID = $("#productAttributeID").val(); 
  if (productAttributeID != "" && productAttributeID != null) { 
  $("#hiddenValue").val("edit"); 
  $("#e_Attributes").dialog("open"); 
  } 
 
 }); 
 //刪除 
 $("#delete").click(function () { 
  var productAttributeID = $("#productAttributeID").val(); 
  var productID = $("#productID").val(); 
  if (productAttributeID != null && productAttributeID != "") { 
  if (confirm("Delete?")) { 
   $.ajax({ 
   type: "GET", 
   url: "@Url.Action("DeleteAttribute", "Product")", 
   data: { ProductID: productID, ProductAttributeID: productAttributeID },//參數(shù)名要和Action 中的參數(shù)名相同 
   dataType: "html", 
   cache: false, 
   success: function (result) { 
    $("#d_Attributes").html(result); 
    $("#productAttributeID").val(null); 
   } 
   }); 
  } 
  } 
 }); 
 
 //賦空值，并去除input-validation-error樣式（此樣式不管有無(wú)，均可去除，所以不用判斷了） 
 function putNullValue() { 
  。。。。。。／／此處省略 
 } 
 //賦值 
 function putValue(aData) { 
  。。。。。。//此處省略 
 } 
 }); 
 
 $.ajaxSetup({ cache: false }); 
</script>

上面代碼說(shuō)明：這段代碼分別為dialog 的聲明，datatables的聲明以add,edit,delete的操作。
添加功能效果圖

編輯功能效果圖：

刪除效果圖：

到此，功能已經(jīng)全部實(shí)現(xiàn)，所需的代碼也已經(jīng)貼出。
4、分頁(yè)實(shí)現(xiàn)

引入CSS文件和JS文件

<style type="text/css" title="currentStyle"> 
 @import "DataTables-1.8.1/media/css/demo_page.css"; 
 @import "DataTables-1.8.1/media/css/demo_table.css"; 
 @import "DataTables-1.8.1/media/css/demo_table_jui.css"; 
</style> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script> 
 
 -------------------------------------------------------------------------- 
 
-----------最簡(jiǎn)單的方式： 
 $(document).ready(function() { 
 $("#example").dataTable(); 
}); 
 
----------也可以自己定義各屬性： 
<script type="text/javascript" language="javascript"> 
 $(document).ready(function() { 
  $("#example").dataTable({ 
//  "bPaginate": true, //開(kāi)關(guān)，是否顯示分頁(yè)器 
//  "bInfo": true, //開(kāi)關(guān)，是否顯示表格的一些信息 
//  "bFilter": true, //開(kāi)關(guān)，是否啟用客戶(hù)端過(guò)濾器 
//  "sDom": "<>lfrtip<>", 
//  "bAutoWith": false, 
//  "bDeferRender": false, 
//  "bJQueryUI": false, //開(kāi)關(guān)，是否啟用JQueryUI風(fēng)格 
//  "bLengthChange": true, //開(kāi)關(guān)，是否顯示每頁(yè)大小的下拉框 
//  "bProcessing": true, 
//  "bScrollInfinite": false, 
//  "sScrollY": "800px", //是否開(kāi)啟垂直滾動(dòng)，以及指定滾動(dòng)區(qū)域大小,可設(shè)值：'disabled','2000px' 
//  "bSort": true, //開(kāi)關(guān)，是否啟用各列具有按列排序的功能 
//  "bSortClasses": true, 
//  "bStateSave": false, //開(kāi)關(guān)，是否打開(kāi)客戶(hù)端狀態(tài)記錄功能。這個(gè)數(shù)據(jù)是記錄在cookies中的，打開(kāi)了這個(gè)記錄后，即使刷新一次頁(yè)面，或重新打開(kāi)瀏覽器，之前的狀態(tài)都是保存下來(lái)的- ------當(dāng)值為true時(shí)aoColumnDefs不能隱藏列 
//  "sScrollX": "50%", //是否開(kāi)啟水平滾動(dòng)，以及指定滾動(dòng)區(qū)域大小,可設(shè)值：'disabled','2000%' 
//  "aaSorting": [[0, "asc"]], 
//  "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隱藏列 
//  "sDom": '<"H"if>t<"F"if>', 
  "bAutoWidth": false, //自適應(yīng)寬度 
  "aaSorting": [[1, "asc"]], 
  "sPaginationType": "full_numbers", 
  "oLanguage": { 
   "sProcessing": "正在加載中......", 
   "sLengthMenu": "每頁(yè)顯示 _MENU_ 條記錄", 
   "sZeroRecords": "對(duì)不起，查詢(xún)不到相關(guān)數(shù)據(jù)！", 
   "sEmptyTable": "表中無(wú)數(shù)據(jù)存在！", 
   "sInfo": "當(dāng)前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄", 
   "sInfoFiltered": "數(shù)據(jù)表中共為 _MAX_ 條記錄", 
   "sSearch": "搜索", 
   "oPaginate": { 
   "sFirst": "首頁(yè)", 
   "sPrevious": "上一頁(yè)", 
   "sNext": "下一頁(yè)", 
   "sLast": "末頁(yè)" 
   } 
  } //多語(yǔ)言配置 
 
  }); 
 }); 
 </script>

對(duì)于 dataTables 來(lái)說(shuō)，表格必須通過(guò) thead 和 tbody 進(jìn)行說(shuō)明，如下所示

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
 <thead> 
  <tr> 
  <th> 
   Rendering engine 
  </th> 
  <th> 
   Browser 
  </th> 
  <th> 
   Platform(s) 
  </th> 
  <th> 
   Engine version 
  </th> 
  <th> 
   CSS grade 
  </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr class="odd gradeX"> 
  <td> 
   Trident 
  </td> 
  <td> 
   Internet Explorer 4.0 
  </td> 
  <td> 
   Win 95+ 
  </td> 
  <td class="center"> 
   4 
  </td> 
  <td class="center"> 
   X 
  </td> 
  </tr>

如果沒(méi)有 thead 將會(huì)報(bào)錯(cuò)。

bPaginate: 是否分頁(yè)，默認(rèn)為 true，分頁(yè)
iDisplayLength : 每頁(yè)的行數(shù)，每頁(yè)默認(rèn)數(shù)量:10
sPaginationType: 分頁(yè)樣式，支持兩種內(nèi)置方式，two_button 和 full_numbers, 默認(rèn)使用 two_button。
bLengthChange : 是否允許用戶(hù)通過(guò)一個(gè)下拉列表來(lái)選擇分頁(yè)后每頁(yè)的行數(shù)。行數(shù)為 10，25，50，100。這個(gè)設(shè)置需要 bPaginate 支持。默認(rèn)為 true。
bFilter: 啟用或禁止數(shù)據(jù)過(guò)濾，默認(rèn)為 true。注意，如果使用過(guò)濾功能，但是希望關(guān)閉默認(rèn)的過(guò)濾輸入框，應(yīng)使用 sDom
bInfo: 允許或者禁止表信息的顯示，默認(rèn)為 true，顯示信息。

最為簡(jiǎn)單的使用方式，就是零配置的方式。

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

以上就是關(guān)于jQuery表格插件datatables用法的詳細(xì)介紹，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線(xiàn)工具

數(shù)據(jù)庫(kù)

CMS

常用工具

jQuery表格插件datatables用法詳解

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具