日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery dataTables 的使用

發布時間:2025/3/18 编程问答 20 豆豆
生活随笔 收集整理的這篇文章主要介紹了 jQuery dataTables 的使用 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

?

jQuery 的插件 dataTables 是一個優秀的表格插件,提供了針對表格的排序、瀏覽器分頁、服務器分頁、篩選、格式化等功能。dataTables 的網站上也提供了大量的演示和詳細的文檔進行說明,為了方便學習使用,這里一步一步進行說明。

首先,需要到 dataTables 的網站?http://www.datatables.net/?下載這個腳本庫,

目前最新的版本是 1.8.2,下載的壓縮包中使用的 jQuery 是 1.4.4 。現在 jQuery1.5.1 已經發布,所以,這里使用最新的 jQuery 1.5.1 。

然后,在網頁中先加入 jQuery 的引用,然后,加入 dataTables 的引用。

?

引入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, //開關,是否顯示分頁器
//??????????????? "bInfo": true, //開關,是否顯示表格的一些信息
//??????????????? "bFilter": true, //開關,是否啟用客戶端過濾器
//??????????????? "sDom": "<>lfrtip<>",
//??????????????? "bAutoWith": false,
//??????????????? "bDeferRender": false,
//??????????????? "bJQueryUI": false, //開關,是否啟用JQueryUI風格
//??????????????? "bLengthChange": true, //開關,是否顯示每頁大小的下拉框
//??????????????? "bProcessing": true,
//??????????????? "bScrollInfinite": false,
//??????????????? "sScrollY": "800px", //是否開啟垂直滾動,以及指定滾動區域大小,可設值:'disabled','2000px'
//??????????????? "bSort": true, //開關,是否啟用各列具有按列排序的功能
//??????????????? "bSortClasses": true,
//??????????????? "bStateSave": false, //開關,是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的, 打開了這個記錄后,即使刷新一次頁面,或重新打開瀏覽器,之前的狀態都是保存下來的- ------當值為true時aoColumnDefs不能隱藏列
//??????????????? "sScrollX": "50%", //是否開啟水平滾動,以及指定滾動區域大小,可設值:'disabled','2000%'
//??????????????? "aaSorting": [[0, "asc"]],

//??????????????? "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隱藏列
//??????????????? "sDom": '<"H"if>t<"F"if>',
??????????????? "bAutoWidth": false, //自適應寬度
??????????????? "aaSorting": [[1, "asc"]],
??????????????? "sPaginationType": "full_numbers",
??????????????? "oLanguage": {
??????????????????? "sProcessing": "正在加載中......",
??????????????????? "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
??????????????????? "sZeroRecords": "對不起,查詢不到相關數據!",
??????????????????? "sEmptyTable": "表中無數據存在!",
??????????????????? "sInfo": "當前顯示 _START_ 到 _END_ 條,共 _TOTAL_ 條記錄",
??????????????????? "sInfoFiltered": "數據表中共為 _MAX_ 條記錄",
??????????????????? "sSearch": "搜索",
??????????????????? "oPaginate": {
??????????????????????? "sFirst": "首頁",
??????????????????????? "sPrevious": "上一頁",
??????????????????????? "sNext": "下一頁",
??????????????????????? "sLast": "末頁"
??????????????????? }
??????????????? } //多語言配置

?

??????????? });
??????? });
??? </script>

?

?

----------------頁面:

?

對于 dataTables 來說,表格必須通過 thead 和 tbody 進行說明,如下所示,

<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 將會報錯。

最為簡單的使用方式,就是零配置的方式。

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

?

以下是在進行dataTable綁定處理時候可以附加的參數:?

屬性名稱取值范圍解釋
bAutoWidthtrue or false, default true是否自動計算表格各列寬度
bDeferRendertrue or false, default false用于渲染的一個參數
bFiltertrue or false, default true開關,是否啟用客戶端過濾功能
bInfotrue or false, default true開關,是否顯示表格的一些信息
bJQueryUItrue or false, default false是否使用jquery ui themeroller的風格
bLengthChangetrue or false, default true開關,是否顯示一個每頁長度的選擇條(需要分頁器支持)
bPaginatetrue or false, default true開關,是否顯示(使用)分頁器
bProcessingtrue or false, defualt false開關,以指定當正在處理數據的時候,是否顯示“正在處理”這個提示信息
bScrollInfinitetrue or false, default false開關,以指定是否無限滾動(與sScrollY配合使用),在大數據量的時候很有用。當這個標志為true的時候,分頁器就默認關閉
bSorttrue or false, default true開關,是否讓各列具有按列排序功能
bSortClassestrue or false, default true開關,指定當當前列在排序時,是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3',打開后,在處理大數據時,性能有所損失
bStateSavetrue or false, default false開關,是否打開客戶端狀態記錄功能。這個數據是記錄在cookies中的,打開了這個記錄后,即使刷新一次頁面,或重新打開瀏覽器,之前的狀態都是保存下來的
sScrollX'disabled' or? '100%' 類似的字符串是否開啟水平滾動,以及指定滾動區域大小
sScrollY'disabled' or '200px' 類似的字符串是否開啟垂直滾動,以及指定滾動區域大小
------
選項
aaSortingarray array[int,string], 如[], [[0,'asc'], [0,'desc']]指定按多列數據排序的依據
aaSortingFixed同上同上。唯一不同點是不能被用戶的自定義配置沖突
aLengthMenudefault [10, 25, 50, 100],可以為一維數組,也可為二維數組,比如:[[10, 25, 50, -1], [10, 25, 50, "All"]]這個為選擇每頁的條目數,當使用一個二維數組時,二維層面只能有兩個元素,第一個為顯示每頁條目數的選項,第二個是關于這些選項的解釋
aoSearchColsdefault null, 類似:[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}]給每個列單獨定義其初始化搜索列表特性(這一塊還沒搞懂)
asStripClassesdefault ['odd', 'even'], 比如['strip1', 'strip2', 'strip3']指定要被應用到各行的class風格,會自動循環
bDestroytrue or false, default false用于當要在同一個元素上執行新的dataTable綁定時,將之前的那個數據對象清除掉,換以新的對象設置
bRetrievetrue or false, default false用于指明當執行dataTable綁定時,是否返回DataTable對象
bScrollCollapsetrue or false, default false指定適當的時候縮起滾動視圖
bSortCellsToptrue 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'指定當從服務端獲取表格數據時,數據項使用的名字
sAjaxSourceURL字符串,default null指定要從哪個URL獲取數據
sCookiePrefix字符串,default 'SpryMedia_DataTables_'當打開狀態存儲特性后,用于指定存儲在cookies中的字符串的前綴名字
sDomdefault 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'用于指定分頁器風格
sScrollXInnerstring default 'disabled'又是水平滾動相關的,沒搞懂啥意思


DataTable支持如下回調函數?
回調函數名稱參數返回值默認功能
fnCookieCallback1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to setstring: cookie formatted string (which should be encoded by using encodeURIComponent())null當每次cookies改變時,會觸發這個函數調用
fnDrawCallback在每次table被draw完后調用,至于做什么就看著辦吧
fnFooterCallback1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array用于在每次重畫的時候修改表格的腳部
fnFormatNumber1.int : number to be formattedString : formatted string for DataTables to show the number有默認的用于在大數字上,自動加入一些逗號,分隔開
fnHeaderCallback1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array用于在每次draw發生時,修改table的header
fnInfoCallback1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rulesstring: The string to be displayed in the information element.用于傳達table信息
fnInitComplete1.object:oSettings - DataTables settings object表格初始化完成后調用
fnPreDrawCallback1.object:oSettings - DataTables settings objectBoolean用于在開始繪制之前調用,返回false的話,會阻止draw事件發生;返回其它值,draw可以順利執行
fnRowCallback1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering)node : "TR" element for the current row當創建了行,但還未繪制到屏幕上的時候調用,通常用于改變行的class風格
fnServerData1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page.void$.getJSON用于替換默認發到服務端的請求操作
fnStateLoadCallback1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code.Boolean - false if the state should not be loaded, true otherwise在cookies中的數據被加載前執行,可以方便地修改這些數據
fnStateSaveCallback1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie.String - the full string that should be used to save the state在狀態數據被存儲到cookies前執行,可以方便地做一些預操作

?

?

表格的效果

注意,紅框表示了四個默認的設置效果,分別用來選擇每頁的行數,表格的過濾器,表格的信息和換頁。

此時,使用了幾個默認的參數設置。在 dataTables 中,參數名稱的前綴用來說明參數的數據類型,很明顯,b 表示布爾類型,i 表示整數類型,s 表示字符串類型。

  • bPaginate: 是否分頁,默認為 true,分頁
  • iDisplayLength : 每頁的行數,每頁默認數量:10
  • sPaginationType: 分頁樣式,支持兩種內置方式,two_button 和 full_numbers, 默認使用 two_button。
  • bLengthChange : 是否允許用戶通過一個下拉列表來選擇分頁后每頁的行數。行數為 10,25,50,100。這個設置需要 bPaginate 支持。默認為 true。
  • bFilter: 啟用或禁止數據過濾,默認為 true。?注意,如果使用過濾功能,但是希望關閉默認的過濾輸入框,應使用 sDom
  • bInfo: 允許或者禁止表信息的顯示,默認為 true,顯示信息。

?我們也可以通過傳遞一個初始化參數對象來改變這些設置。例如,下面的例子將每頁的行數設置為 20 行。

$(function?() {
????$("#example").dataTable(
??????{
??????????iDisplayLength: 20
??????}
????);

?

});

?

?

?

?

?

轉載于:https://my.oschina.net/u/2260184/blog/540563

總結

以上是生活随笔為你收集整理的jQuery dataTables 的使用的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。