jQuery表格插件datatables用法詳解
更新時(shí)間：2020年11月23日 15:37:06 作者：SimonMaxs
這篇文章主要介紹了jQuery表格插件datatables用法，包括分頁、排序等功能,是jQuery表格插件datatables比較基礎(chǔ)的部分知識,需要的朋友可以參考下
一、Datatables簡介
DataTables是一個(gè)jQuery的表格插件。這是一個(gè)高度靈活的工具，依據(jù)的基礎(chǔ)逐步增強(qiáng)，這將增加先進(jìn)的互動控制，支持任何HTML表格。主要特點(diǎn)：
- 自動分頁處理
- 即時(shí)表格數(shù)據(jù)過濾
- 數(shù)據(jù)排序以及數(shù)據(jù)類型自動檢測
- 自動處理列寬度
- 可通過CSS定制樣式
- 支持隱藏列
- 易用
- 可擴(kuò)展性和靈活性
- 國際化
- 動態(tài)創(chuàng)建表格
- 免費(fèi)的
二、如何使用
在做后臺的時(shí)候并沒有美工和前端工程師來配合你做頁面，為了顯示數(shù)據(jù)并有一定的美感，我們可以使用jQuery的DataTables插件來幫助我們完成任務(wù)
1、DataTables的默認(rèn)配置
$(document).ready(function() {
$('#example').dataTable();
} );
2、DataTables的一些基礎(chǔ)屬性配置
"bPaginate": true, //翻頁功能 "bLengthChange": true, //改變每頁顯示數(shù)據(jù)數(shù)量 "bFilter": true, //過濾功能 "bSort": false, //排序功能 "bInfo": true,//頁腳信息 "bAutoWidth": true//自動寬度
3、數(shù)據(jù)排序
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );
從第0列開始，以第4列倒序排列
4、隱藏某些列
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
5、國際化
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "抱歉， 沒有找到",
"sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數(shù)據(jù)",
"sInfoEmpty": "沒有數(shù)據(jù)",
"sInfoFiltered": "(從 _MAX_ 條數(shù)據(jù)中檢索)",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "后一頁",
"sLast": "尾頁"
},
"sZeroRecords": "沒有檢索到數(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請求數(shù)據(jù)
- •Server side processing 服務(wù)器端數(shù)據(jù)
三、實(shí)例講解
1、需求：如下圖所示，對datatables的內(nèi)容進(jìn)行添加，編輯，刪除的操作。
2、分析：添加功能---單擊add按鈕，彈出對話框，添加新的內(nèi)容。
編輯功能---單擊datatables可以選中一行，此行改變顏色，即是已經(jīng)選中，單擊edit按鈕，彈出dialog，此dialog中的內(nèi)容是我們選中行的內(nèi)容。如果沒有選中行，點(diǎn)擊edit按鈕，則不會彈出dialog。當(dāng)雙擊datatables中的某一行時(shí)，也彈出dialog，并且雙擊的行改變顏色，dialog中的內(nèi)容是我們雙擊行的內(nèi)容。
刪除功能---單擊datatables選中一行，單擊delete按鈕，彈出警告框，提示要不要?jiǎng)h除所選內(nèi)容。當(dāng)沒有選中任何內(nèi)容時(shí)，單擊delete按鈕，不會彈出警告框，也不會刪除內(nèi)容。
3、編碼：
Attributes//名稱
<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>
上面代碼說明：這段代碼主要分了兩個(gè)部分，第一部分是jquery datatables的聲明，<table id="gridtable" class="gridtable">；第二部分是dialog的聲明，以及操作所需要的action，此部分的操作選擇ajax無刷新頁面技術(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, //是否分頁。
"bProcessing": false, //當(dāng)datatable獲取數(shù)據(jù)時(shí)候是否顯示正在處理提示信息。
'bFilter': false, //是否使用內(nèi)置的過濾功能。
'bLengthChange': false, //是否允許用戶自定義每頁顯示條數(shù)。
'sPaginationType': 'full_numbers', //分頁樣式
});
//單擊，賦值，改樣式
$("#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樣式（此樣式不管有無，均可去除，所以不用判斷了）
function putNullValue() {
。。。。。。／／此處省略
}
//賦值
function putValue(aData) {
。。。。。。//此處省略
}
});
$.ajaxSetup({ cache: false });
</script>
上面代碼說明：這段代碼分別為dialog 的聲明，datatables的聲明以add,edit,delete的操作。
添加功能效果圖
編輯功能效果圖：
刪除效果圖：
到此，功能已經(jīng)全部實(shí)現(xiàn)，所需的代碼也已經(jīng)貼出。
4、分頁實(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>
--------------------------------------------------------------------------
-----------最簡單的方式：
$(document).ready(function() {
$("#example").dataTable();
});
----------也可以自己定義各屬性：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#example").dataTable({
// "bPaginate": true, //開關(guān)，是否顯示分頁器
// "bInfo": true, //開關(guān)，是否顯示表格的一些信息
// "bFilter": true, //開關(guān)，是否啟用客戶端過濾器
// "sDom": "<>lfrtip<>",
// "bAutoWith": false,
// "bDeferRender": false,
// "bJQueryUI": false, //開關(guān)，是否啟用JQueryUI風(fēng)格
// "bLengthChange": true, //開關(guān)，是否顯示每頁大小的下拉框
// "bProcessing": true,
// "bScrollInfinite": false,
// "sScrollY": "800px", //是否開啟垂直滾動，以及指定滾動區(qū)域大小,可設(shè)值：'disabled','2000px'
// "bSort": true, //開關(guān)，是否啟用各列具有按列排序的功能
// "bSortClasses": true,
// "bStateSave": false, //開關(guān)，是否打開客戶端狀態(tài)記錄功能。這個(gè)數(shù)據(jù)是記錄在cookies中的，打開了這個(gè)記錄后，即使刷新一次頁面，或重新打開瀏覽器，之前的狀態(tài)都是保存下來的- ------當(dāng)值為true時(shí)aoColumnDefs不能隱藏列
// "sScrollX": "50%", //是否開啟水平滾動，以及指定滾動區(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": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "對不起，查詢不到相關(guān)數(shù)據(jù)！",
"sEmptyTable": "表中無數(shù)據(jù)存在！",
"sInfo": "當(dāng)前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sInfoFiltered": "數(shù)據(jù)表中共為 _MAX_ 條記錄",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "末頁"
}
} //多語言配置
});
});
</script>
對于 dataTables 來說，表格必須通過 thead 和 tbody 進(jìn)行說明，如下所示
<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>
如果沒有 thead 將會報(bào)錯(cuò)。
- bPaginate: 是否分頁，默認(rèn)為 true，分頁
- iDisplayLength : 每頁的行數(shù)，每頁默認(rèn)數(shù)量:10
- sPaginationType: 分頁樣式，支持兩種內(nèi)置方式，two_button 和 full_numbers, 默認(rèn)使用 two_button。
- bLengthChange : 是否允許用戶通過一個(gè)下拉列表來選擇分頁后每頁的行數(shù)。行數(shù)為 10，25，50，100。這個(gè)設(shè)置需要 bPaginate 支持。默認(rèn)為 true。
- bFilter: 啟用或禁止數(shù)據(jù)過濾，默認(rèn)為 true。 注意，如果使用過濾功能，但是希望關(guān)閉默認(rèn)的過濾輸入框，應(yīng)使用 sDom
- bInfo: 允許或者禁止表信息的顯示，默認(rèn)為 true，顯示信息。
最為簡單的使用方式，就是零配置的方式。
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable();
});
以上就是關(guān)于jQuery表格插件datatables用法的詳細(xì)介紹，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- JQuery動態(tài)給table添加、刪除行 改進(jìn)版
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- jquery獲取table中的某行全部td的內(nèi)容方法
- jquery sortable的拖動方法示例詳解
- jQuery操作表格（table）的常用方法、技巧匯總
- jquery easyui 結(jié)合jsp簡單展現(xiàn)table數(shù)據(jù)示例
- jQuery表格插件datatables用法總結(jié)
- jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
- jQuery實(shí)現(xiàn)動態(tài)添加tr到table的方法
- jQuery實(shí)現(xiàn)動態(tài)操作table行
相關(guān)文章
jQuery實(shí)現(xiàn)右側(cè)抽屜式在線客服功能
本篇文章給大家分先一下jQuery實(shí)現(xiàn)右側(cè)抽屜式在線客服功能的實(shí)例代碼，有需要的讀者們參考下吧。2017-12-12
jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁面元素屬性動態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery輪播圖的實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證
這篇文章主要介紹了jQuery插件學(xué)習(xí)教程之SlidesJs輪播+Validation驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
本文通過實(shí)例代碼給大家介紹了jquery 雙擊編輯表格，需要的朋友參考下吧2017-06-06
ID是html頁面中一些元素都可以有個(gè)本頁面唯一的id包括如,div,input,iframe等等都是可以的,下面我來給大家介紹利用jquery 獲取id值方法,有需要了解的朋友可參考2013-09-09
jQuery.clean源碼分析包括：jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下2013-01-01
jQuery EasyUI Layout實(shí)現(xiàn)tabs標(biāo)簽的實(shí)例
這篇文章主要介紹了jQuery EasyUI Layout實(shí)現(xiàn)tabs標(biāo)簽的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
下面簡單介紹一下jQuery的一些特性和用法，對于學(xué)習(xí)jquery的朋友有不少幫助。2010-01-01
jQuery中$.each()函數(shù)的用法引申實(shí)例
jQuery中的$.each()函數(shù)比forEach更加強(qiáng)大,可以用來遍歷JavaScript中的任意集合,借來下來我們會舉幾個(gè)jQuery中$.each()函數(shù)的用法引申實(shí)例,首先先來回顧一下遍歷用法的基礎(chǔ):2016-05-05