jquery datatable[表格處理]

時間  2019-11-13
標籤 jquery datatable 表格 處理 欄目 JQuery 简体版
原文   原文鏈接

最近在公司實習發現一個額功能強大的表格解決方案，瞭解了一下，先總結以下：php

1.官網：http://www.datatables.net/html

2.須要特別注意:被dataTable處理的table對象，必須有thead與tbody，並且，結構要規整（數據不必定要完整），這樣才能正確處理。 jquery

3.一些基本屬性：ajax

　　"bPaginate": true, //翻頁功能json

　　"bLengthChange": true, //改變每頁顯示數據數量
　　"bFilter": true, //過濾功能
　　"bSort": false, //排序功能
　　"bInfo": true,//頁腳信息
　　"bAutoWidth": true//自動寬度數組

4.可設置屬性瀏覽器

屬性名稱服務器

取值範圍cookie

解釋ide

bAutoWidth

true or false, default true

是否自動計算表格各列寬度

bDeferRender

true or false, default false

用於用於襯着的一個參數

bFilter

true or false, default true

開關，是否啓用客戶端過濾功能

bInfo

true or false, default true

開關，是否顯示錶格的一些信息

bJQueryUI

true or false, default false

是否使用jquery ui themeroller的風格（不是很懂）

bLengthChange

true or false, default true

開關，是否顯示一個每頁長度的選擇條（須要分頁器支持）

bPaginate

true or false, default true

開關，是否顯示（使用）分頁器

bProcessing

true or false, defualt false

開關，以指定當正在處理數據的時候，是否顯示「正在處理」這個提示信息

bScrollInfinite

true or false, default false

開關，以指定是否無限滾動（與sScrollY配合使用），在大數據量的時候頗有用。當這個標誌爲true的時候，分頁器就默認關閉

bSort

true or false, default true

開關，是否讓各列具備按列排序功能

bSortClasses

true or false, default true

開關，指定當當前列在排序時，是否增長classes 'sorting_1', 'sorting_2' and 'sorting_3'，打開後，在處理大數據時，性能有所損失

bStateSave

true or false, default false

開關，是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的，打開了這個記錄後，即便刷新一次頁面，或從新打開瀏覽器，以前的狀態都是保存下來的

sScrollX

'disabled' or  '100%' 相似的字符串

是否開啓水平滾動，以及指定滾動區域大小

sScrollY

'disabled' or '200px' 相似的字符串

是否開啓垂直滾動，以及指定滾動區域大小

aaSorting

array array[int,string], 如[], [[0,'asc'], [0,'desc']]

指定按多列數據排序的依據

aaSortingFixed

同上

同上。惟一不一樣點是不能被用戶的自定義配置衝突

aLengthMenu

default [10, 25, 50, 100]，能夠爲一維數組，也可爲二維數組，好比：[[10, 25, 50, -1], [10, 25, 50, "All"]]

這個爲選擇每頁的條目數，當使用一個二維數組時，二維層面只能有兩個元素，第一個爲顯示每頁條目數的選項，第二個是關於這些選項的解釋

aoSearchCols

default null, 相似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}]

給每一個列單獨定義其初始化搜索列表特性（這一塊還沒搞懂）

asStripClasses

default ['odd', 'even'], 好比['strip1', 'strip2', 'strip3']

指定要被應用到各行的class風格，會自動循環

bDestroy

true or false, default false

用於當要在同一個元素上執行新的dataTable綁定時，將以前的那個數據對象清除掉，換以新的對象設置

bRetrieve

true or false, default false

用於指明當執行dataTable綁定時，是否返回DataTable對象

bScrollCollapse

true or false, default false

指定適當的時候縮起滾動視圖

iCookieDuration

整數，默認7200，單位爲秒

指定用於存儲客戶端信息到cookie中的時間長度，超過這個時間後，自動過時

iDeferLoading

整數，默認爲null

延遲加載，它的參數爲要加載條目的數目，一般與bServerSide，sAjaxSource等配合使用

iDisplayLength

整數，默認爲10

用於指定一屏顯示的條數，需開啓分頁器

iDisplayStart

整數，默認爲0

用於指定從哪一條數據開始顯示到表格中去

iScrollLoadGap

整數，默認爲100

用於指定當DataTable設置爲滾動時，最多能夠一屏顯示多少條數據

oSearch

默認{ "sSearch": "", "bRegex": false, "bSmart": true }

又是初始時指定搜索參數相關的，有點複雜，沒搞懂目前

sAjaxDataProp

字符串，default 'aaData'

指定當從服務端獲取表格數據時，數據項使用的名字

sAjaxSource

URL字符串，default null

指定要從哪一個URL獲取數據（通常跳入一個controller返回數據）

sCookiePrefix

字符串，default 'SpryMedia_DataTables_'

當打開狀態存儲特性後，用於指定存儲在cookies中的字符串的前綴名字

sDom

default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)

這是用於定義DataTable佈局的一個強大的屬性，另開專門文檔來補充說明吧

sPaginationType

'full_numbers' or 'two_button', default 'two_button'

用於指定分頁器風格

5.經常使用方法

  a)數據排序

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

從第0列開始，以第4列倒序排列

　　b）隱藏某些列

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

　　c)狀態保存，使用了翻頁或者改變了每頁顯示數據數量，會保存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容。

$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );

　　d)顯示數字的翻頁樣式

$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );

　　e)水平限制寬度

$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );

　f)改變語言

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

 　g)排序控制

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

　　h)使用ajax源

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );

 

　　j)使用ajax，在服務器端整理數據

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",

"sAjaxSource": "./server_processing.php",
/*若是加上下面這段內容，則使用post方式傳遞數據
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET[‘sColumns’]將接收到aoColumns傳遞數據
} );
} );

 　k)爲每行加載id和class

　　　　服務器端返回數據的格式：

{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},

6.實例

 html頁面：

 1                     <div class="portlet-body">
 2                         <table id="userDataTable" class="table table-hover table-bordered table-striped  dt-responsive" width="100%">
 3                             <thead>
 4                                 <tr>
 5                                     <th style="text-align: center;font-size: 14px;">帳號</th>
 6                                     <th style="text-align: center;font-size: 14px;">姓名</th>
 7                                     <th style="text-align: center;font-size: 14px;">角色</th>
 8                                     <th style="text-align: center;font-size: 14px;">更新時間</th>
 9                                     <th style="text-align: center;font-size: 14px;width:15%">操做</th>
10                                 </tr>
11                             </thead>
12                             <tbody style="text-align: center;font-size: 15px;"></tbody>
13                         </table>
14                     </div>

 

js代碼：

 1     userDataTable = $('#userDataTable').DataTable({"bLengthChange":false,"bServerSide": true,"bFilter": false,"bProcessing": true,"bSort": true,"sAjaxSource": CONSTANT_PATH+"/user/queryUsers",
 2            "fnServerParams" : function(aDataSet) {aDataSet.push({"name" : "userRole","value" : $("#roles").val()},{"name" : "userNo","value":$("#userNo1").val()},{"name" : "userName","value" : $("#userName").val() },{"name" : "createStartDt","value" : $("#createStartDt").val()},{"name" : "createEndDt","value" : $("#createEndDt").val()});},
 3            "fbServerData":function(sSource,aDataSet){$.ajax({"dataType":"json","type":"GET","url":sSource,"data":aDataSet});},
 4            "aoColumns":[{"mDataProp":"userNo"},{"mDataProp":"userName"},{"mDataProp":"ext1"},{"mDataProp":"createDate"},{"mDataProp":"locked"}],    
 5            "aoColumnDefs": [
 6                  {orderable:false,targets:[1,2,3,4]},
 7                 {"aTargets":[0],"mRender":function(data,type,full){return (full.locked)?data+"&nbsp;<span class='label label-danger'><i class='icon-lock'></i></span>":data;}},
 8                 {"aTargets": [4],"mRender":function (data, type, full) {
 9                     var lockAction = (data)?"<i class='icon-lock-open'></i> 解封用戶":"<i class='icon-lock'></i> 禁封用戶";
10                     var operation="<div class='btn-group'><a class='btn btn-default btn-sm'  id='query'  data-id='"+full.userId +"'data-json='"+JSON.stringify(full)+"'><i class='fa fa-file-text-o'></i>  用戶詳情</a><a href='#' type='button' class='btn btn-default btn-sm dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><span class='caret'></span></a><ul class='dropdown-menu'>";
11                         operation+="<li><a id='reset' data-value='"+full.userNo+"' data-id='"+full.userId +"'><i class='icon-puzzle'></i>  重置密碼</a></li>";
12                         operation+="<li><a id='alterRole' data-value='"+full.userNo+"' data-id='"+full.userId +"'><i class='icon-users'></i> 變動角色</a></li>";
13                         operation+="<li><a id='lock' data-value='"+data+"' data-type='"+full.userName+"' data-id='"+full.userId +"'>"+lockAction+"</a></li>";
14                       return operation+"<li><a id='dltRole' data-name='"+full.userName+"' data-id='"+full.userId +"'><i class='fa fa-remove'></i> 刪除用戶</a></li></ul></div>";
15                       }
16                 },{"aTargets": [1,2,3],"mRender":function (data, type, full) {if(data!=null&&data!="")return data;else return "<font color='font-red-mint'>還沒有設置</font>";}}],                             
17           "oLanguage":{"sUrl": CONSTANT_PATH+"/resources/assets/plugins/dataTables/txt/page.txt"}
18      });

 其中CONSTANT_PATH+"/resources/assets/plugins/dataTables/txt/page.txt頁面中：

 1 {"sProcessing": "處理中...",
 2 "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
 3 "sZeroRecords":  "沒有匹配的記錄",
 4 "sInfo": "從 _START_ 到 _END_ /共_TOTAL_條數據",
 5 "sInfoEmpty": "沒有數據",
 6 "sInfoFiltered": "",
 7 "sZeroRecords": "沒有數據",
 8 "oPaginate": {
 9        "sFirst": "首頁",
10        "sPrevious": "上一頁",
11        "sNext": "下一頁",
12        "sLast": "尾頁"}
13 }

 最終結果

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程