datatables使用指南
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
前言
之前做項目也用過datatables渲染數(shù)據(jù)表，但也是一掃而過，照著例子初始化，滿足基礎(chǔ)的搜索，翻頁和排序的功能就拉倒了，沒有深入閱讀了解過，這次做項目又使用到了，特此記錄，方便以后查看。
datatables 官網(wǎng)?（datatables 有個中文官網(wǎng)，怎么說呢，盡可能的看英文官方吧。）
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
DataTables 是一個jquery的js庫.是一個高度靈活。它是一個高度靈活的工具，建立在漸進增強的基礎(chǔ)之上，它將所有這些高級特性添加到任何HTML表中。
這段我是機翻的，不通順就湊合讀吧。
1.引入文件
1.1cdn引入核心文件
?如果只使用datatables的基礎(chǔ)功能，那引入兩個文件就可以。
css:? //cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css
js:??//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
?我一般都是下載下來用，剛為了寫指南，復(fù)制了一個地址加載了一下文件，發(fā)現(xiàn)加載速度有些慢。推薦還是下載下來用吧。
?
1.2下載到本地項目中引用
官網(wǎng)下載地址，點開下載地址，是一個讓你選擇下載內(nèi)容的下載器（download builder?），還是全英文的，不要慫，一步一步來。
The best method for getting a hold of DataTables for use in your project depends upon your programming environment.
這句話大致意思說，使用DataTables最好的方法就是根據(jù)你自己項目實際需求去選擇。（programming environment?程序設(shè)計環(huán)境，程序設(shè)計條件）
?
The download builder below provides a simple method that you can use to build your own custom DataTables package - including only the software that you need...
這個下面的下載器，提供（provides ）一個簡單的方法（method ）構(gòu)建你自己的習(xí)慣（custom）的DataTables 包，僅包含你想要的軟件（software ）。（其實我英語不好，但是做程序久了，一些相關(guān)詞匯還是認(rèn)識的吧？不行就上翻譯軟件！）
?
上面的原文，我只截取了一部分，最后一部分是說還可通過cdn,或者通過包管理器如：npm,yarn，bower下載。我就告訴你怎么選，具體你想怎么獲取看你心情
1.3下載器的使用
Step 1. Choose a styling framework（選一個樣式框架）
下載器提供了多種樣式庫讓你下載，如果項目沒有特殊UI統(tǒng)一要求的話，使用第一個默認(rèn)樣式即可，或者根據(jù)已使用的CSS框架去選擇。
我做個項目是大數(shù)據(jù)的管理后臺，是內(nèi)網(wǎng)使用，所以對UI上的追求不太大，我司使用的是bootstrap3,所以我下載的是bootstrap3的樣式，也就是第二個。
?
Step 2. Select packages（選擇包--主要文件）
雖然datatables是依賴jQuery的，但是不推薦在構(gòu)建器中下載，使用項目中已有的jQuery即可。然后datatables的文件肯定是要選的。
關(guān)鍵是要看最后一個:
Editor-Add full editing controls to your DataTables.
編輯器-向DataTables添加完整的編輯控件。
?
如果項目需要使用Editor！
Editor is a commercial extension for DataTables, it requires a license to use it for longer than the free trial period. Please create an account or login to be able to include Editor in the package.
Editor是DataTables的商業(yè)擴展，它需要許可證才能使用超過免費試用期。請創(chuàng)建一個帳戶或登錄，以便能夠在包中包含編輯器。
你首先要注冊一個賬戶，然后才能選擇下載包里包含它，單個開發(fā)人員付費永久使用好像是100刀。
100多刀啊！合小700人民幣啊！我懷著敬畏的心，下載了一個試用版本，有十五天的試用期，我主要是想知道它是如何加密一個JS文件讓它可以有試用期的，而且指定試用期時間的！首先，它這個文件不能自己發(fā)生請求對吧？如果這個文件自己在運行的時候，還發(fā)送AJAX請求去校驗是否過了試用期，肯定沒人會用這個js了。因為不安全啊！
所以，當(dāng)我下載了文件，打開之后我發(fā)現(xiàn)。文件內(nèi)部定義了N多的字符串變量去混淆，有一個專用的函數(shù)去讀取混淆后的變量拼接結(jié)果去調(diào)用對應(yīng)方法，還有一個內(nèi)部的date方法獲取當(dāng)前的時間戳和下載時間戳去做比較，如果超出指定時間，則阻斷執(zhí)行，并alert出你到期提示，且提示錯誤，無發(fā)運行。
然后我又搜了一波破解教程，但是都是針對老版的，對最新版的有沒有效不知道，不過我當(dāng)時信心滿滿的和老大保證，給我時間，我一點一點的逆推，肯定能破解這個！
老大點點頭，說，你先用試用版做Demo,然后轉(zhuǎn)身走了，有大概15分鐘后給我發(fā)了一個editor的文件給我，然后是一句話：我買了！浪費那時間干啥！也尊重一下知識成果。。。。
100多刀啊！合小700人民幣啊！
?
Editor依賴兩個datatables擴展
所以你要使用Editor的話，你還需要勾選上?Buttons和Select這個兩個擴展。如下圖：
?
?
Step 3. Pick a download method （選擇一個下載方法）
我是選的第二個直接下載，具體如何使用，看你喜歡啦~
?
2.學(xué)習(xí)使用
Examples index，示例索引里包含了datatables的所有動態(tài)示列，然后頁面中開頭也說了，“實踐出真知”（One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible.?）。那么開始吧，通過示列學(xué)習(xí)如何使用datatables!
2.1Basic initialisation(基礎(chǔ)初始化)
我最喜歡的就是datatables一點就是，文檔清晰，示列明確，告訴你要達到示中的效果，需要引入哪些JS文件和CSS文件，HTML結(jié)果是什么樣的，JS初始化代碼是什么樣子的，這樣能讓新手快速進入到狀態(tài)，快速的配置自己的demo，而且還能保證demo運行成功，能夠幫助初學(xué)者樹立自信心，堅持使用下去，學(xué)下去。
Zero configuration（零配置使用）
零配置使用地址
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function：$().DataTable();
默認(rèn)情況下，DataTables啟用了大多數(shù)特性，所以您在自己的表中使用DataTables只需要調(diào)用構(gòu)造函數(shù)。
?
Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.
搜索、排序和分頁的好處將立即添加到表中，如本示例所示。
?
其實這個零配置使用沒啥可說的，這個就是我上面說的，它能夠讓新手快速進入到狀態(tài)，快速的配置自己的demo，而且還能保證demo運行成功，能夠幫助初學(xué)者樹立自信心，堅持使用下去，學(xué)下去。
?
Feature enable / disable（功能的啟用/禁用）
In the following example only the search feature is left enabled (which it is by default).
$(document).ready(function() {$('#example').DataTable( {"paging": false,"ordering": false,"info": false} ); } );Default ordering (sorting)（默認(rèn)排序）
The order parameter is an array of arrays where the first value of the inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' (descending ordering) as required. order is a 2D array to allow multi-column ordering to be defined.
The table below is ordered (descending) by the Age column.
order?選項的參數(shù)是一個二維數(shù)組，允許定義多列排序，其中內(nèi)部數(shù)組的第一個參數(shù)（下例的3）是要排序的列，第二個參數(shù)是排序方式（asc升序，desc降序）。
$(document).ready(function() {$('#example').DataTable( {"order": [[ 3, "desc" ]]} ); } );注意：列是從0開始計算的，例子中的“3”，實際上是第四列（Age）列。
?
Multi-column ordering（多列排序）
一句話解釋多列排序是什么意思：在當(dāng)前列值相同時，引入其它列排序。
比如說：示列中Office列降序排列從Tokyo開始，有五行的數(shù)據(jù)都是Tokyo辦公室，然后按住Shift選中Salary列你看看發(fā)生了什么？
Salary列按照Office已排序的列，進行了排序。
示列：
??$(document).ready(function() {$('#example').dataTable( {columnDefs: [ {targets: [ 0 ],orderData: [ 0, 1 ]? //如果第一列進行排序，有相同數(shù)據(jù)則按照第二列順序排列}, {targets: [ 1 ],orderData: [ 1, 0 ]? //如果第二列進行排序，有相同數(shù)據(jù)則按照第一列順序排列}, {targets: [ 4 ],orderData: [ 4, 0 ]? //如果第五列進行排序，有相同數(shù)據(jù)則按照第一列順序排列} ]} ); } );orderData是指定的列數(shù)據(jù)索引。
文檔中說有兩種選項定義多列排序一個是 columns，另一個是columnDefs選項。
區(qū)別在于如果用columns選項定義列的屬性功能則必須在數(shù)組中為表中的每個列指定一個選項，如果不需要任何選項，則這些條目可以為?null?。下方的示列禁用了第一列上的過濾，而其余列沒有指定，則設(shè)置為null：
$('#example').dataTable( {"columns": [{ "orderData": [ 0, 1 ] },{ "orderData": 0, },{ "orderData": [ 2, 3, 4 ] },null,null] } );?
columnDefs與columns此非常相似，此選項允許你為表中的列分配特定選項，且包含所有columns的選項功能，只不過不需要像columns一樣為表中的每個列指選項。但是要指定targets屬性告訴DataTables應(yīng)該將定義應(yīng)用于哪個列：
$('#example').dataTable( {"columnDefs": [{ "orderData": [ 0, 1 ], "targets": 0 },{ "orderData": 0, "targets": 1 },{ "orderData": [ 2, 3, 4 ], "targets": 2 }] } );targets的值可以是：
- 0或正整數(shù) - 從左數(shù)起的列索引
- 一個負(fù)整數(shù) - 從右邊開始計數(shù)的列索引
- 字符串的類名將匹配在列的TH上
- 字符串_all- 所有列（即分配默認(rèn)值）
當(dāng)columns和columnDefs定義的功能選項沖突時：
?如下第一列和第二列將在表格中顯示，而所有其他列將被隱藏。
var table = $('#myTable').DataTable( {columnDefs: [{ targets: [0, 1], visible: true},{ targets: '_all', visible: false }] } );?
Hidden columns（隱藏列）
There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user (consider also using the?Responsive extension?for this). This is done through the?columns.visible?column option.
?有（There are）時候，僅顯示原始表（original table）有用的的信息子集（sub-set）是有用的（useful to）。例如你想減少屏幕上顯示的數(shù)據(jù)量，以便讓用戶查看起來更清晰。這里是用columns.visible列選項。
$(document).ready(function() {$('#example').DataTable( {"columnDefs": [{"targets": [ 2 ],"visible": false,"searchable": false},{"targets": [ 3 ],"visible": false}]} ); } );此外，由于隱藏數(shù)據(jù)仍然是表的一部分，因此可選地，在允許用戶訪問該數(shù)據(jù)時可以對其進行過濾或禁止過濾 （"searchable": false）。
?
HTML屬性rowspan &colspan設(shè)置表頭跨行跨列
示列地址
<table id="example" class="display" style="width:100%"><thead><tr><th rowspan="2">Name</th><th colspan="2">HR Information</th><th colspan="3">Contact</th></tr><tr><th>Position</th><th>Salary</th><th>Office</th><th>Extn.</th><th>E-mail</th></tr></thead><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>$320,800</td><td>Edinburgh</td><td>5421</td><td>t.nixon@datatables.net</td></tr><!--........--></tbody><tfoot><tr><th>Name</th><th>Position</th><th>Salary</th><th>Office</th><th>Extn.</th><th>E-mail</th></tr></tfoot></table>?
DOM positioning(搜索，分頁，顯示條數(shù)定位)
When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.
當(dāng)定制你自己使用的數(shù)據(jù)表格時，你可能發(fā)現(xiàn)datatable的功能元素（feature elements）輸入，過濾等并不完全符合你項目的需求。為了解決這個問題（To address this issue）提供了Dom初始化參數(shù)（initialisation parameter）。
?
DOM定義要在頁面上顯示的表格控件元素以及按什么順序顯示.
選項
DataTables中的內(nèi)置表控制元素是：
默認(rèn)值是：lfrtip
/* Results in:<div class="wrapper">{length}{processing}{table}{information}{pagination}</div> */ $('#example').dataTable( {"dom": 'lrtip' } );擴展
如果使用按鈕功能使用B，使用選擇功能使用S。
?
標(biāo)簽/元素
除了上面選項之外，你還可以指定div要插入到文檔中的其他元素，這些元素可用于控件元素的樣式/嵌套。要添加標(biāo)簽/元素，需要以下語法：
/* Results in:<div class="wrapper">{filter}{length}{information}{pagination}{table}</div> */ $('#example').dataTable( {"dom": '<"wrapper"flipt>' } );?
多表格控件：示列地址
$(document).ready(function() {$('#example').DataTable( {"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'} ); } );?請注意，表格“t”應(yīng)該只包含一次。
State saving（狀態(tài)保存）
示例地址
DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave??option.
DataTables可以選擇保存表的狀態(tài)（其分頁位置，排序狀態(tài)等），以便在用戶重新加載頁面時可以恢復(fù)，或者在訪問子頁面后返回頁面。stateSave??選項啟用此狀態(tài)保存功能。
例子：
$(document).ready(function() {$('#example').DataTable( {stateSave: true} ); } );?
Alternative pagination（分頁類型）
示例地址
The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option.
(presented by 被…承辦? up to 最多)
Datatable 提供了默認(rèn)的分頁控制（前進和后退和其中最多7頁的數(shù)字按鈕），....吧啦吧啦...這是通過DataTables的可擴展分頁機制實現(xiàn)的，pagingType選項。
DataTables有六個內(nèi)置的分頁按鈕排列：
$(document).ready(function() {$('#example').DataTable( {"pagingType": "full_numbers"} ); } );?
Scroll（表格滾動條）
垂直滾動示例?，垂直動態(tài)高度示例，水平滾動示例，水平垂直都有滾動條的示列
scrollY啟用垂直滾動。垂直滾動會將DataTable約束到給定高度，并為任何溢出當(dāng)前視口的數(shù)據(jù)啟用滾動。這可以用作分頁的替代方案，以在小區(qū)域中顯示大量數(shù)據(jù)（盡管如果需要，可以同時啟用分頁和滾動）。
scrollY可取值限定高度"200px",或CSS3 "vh"單位。該vh單位實際上是瀏覽器窗口高度的百分比。因此50vh其實是窗口高度的50％。視窗大小將在調(diào)整窗口大小時動態(tài)更新。（IE9 +才支持此css3屬性）
scrollCollapse當(dāng)顯示有限數(shù)量的行時，允許表格減小高度。
$(document).ready(function () {$('#example').DataTable({"scrollY": "200px", //50vh"scrollCollapse": true, //當(dāng)顯示有限數(shù)量的行時，允許表格減小高度."scrollX": true, //水平滾動，配合dataTables_wrapper{width:指定像素寬;}使用"paging": true});});此示列代碼開啟“水平”，“垂直”滾動條，并且開啟了“分頁”和允許表格行數(shù)不足時“減小高度”。
?
?Comma decimal place（逗號小數(shù)位）
示列地址
A dot (.) is used to mark the decimal place in Javascript, however,?many parts of the world use a comma?(,) and other characters such as the Unicode decimal separator (?) or a dash (-) are often used to show the decimal place in a displayed number.When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed through the language.decimal option which character is used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type detection and sorting algorithms to sort numbers in your table.
?點（.）用于標(biāo)記Javascript中的小數(shù)位，但是，世界上許多地方都使用逗號（,），其他字符如Unicode小數(shù)點分隔符（?）或短劃線（-）通常用于顯示小數(shù)位在顯示的數(shù)字。當(dāng)讀取這些數(shù)字時，Javascript不會自動將它們識別為數(shù)字，但是，可以通過language.decimal選項指示DataTables的類型檢測和排序方法，該字符用作數(shù)字中的小數(shù)位。這將用于正確調(diào)整DataTables的類型檢測和排序算法，以對表中的數(shù)字進行排序。
$(document).ready(function() {$('#example').DataTable( {"language": {"decimal": ",","thousands": "."}} ); } );language.decimal 的值為空字符串值（此處為默認(rèn)值）會導(dǎo)致DataTables使用點（.）作為小數(shù)點。
注意：如果不指定此選項，則在排序時,像“$1.200.000,00”此類數(shù)據(jù)會被js讀作“1.2刀”,導(dǎo)致排序并未按照預(yù)想的值去排列，就醬，
Language options (語言選項)
示例地址
$(document).ready(function() {$('#example').DataTable( {"language": {"lengthMenu": "Display _MENU_ records per page","zeroRecords": "Nothing found - sorry","info": "Showing page _PAGE_ of _PAGES_","infoEmpty": "No records available","infoFiltered": "(filtered from _MAX_ total records)"}} ); } );注意其中的下劃線字符串，如：“lengthMenu”中的“_MENU_”字符，它將會在初始化時替換為默認(rèn)顯示選擇列表，其他的依次類推，全部見?language?詳細(xì)文檔，其中還包括i18n國際化,兩種方法使用，一種是通過 language.url?ajax請求加載語言包，另一種是在初始化時直接使用language?選項將語言直接指定替換。
中文翻譯如下：
{"sProcessing": "處理中...","sLengthMenu": "顯示 _MENU_ 項結(jié)果","sZeroRecords": "沒有匹配結(jié)果","sInfo": "顯示第 _START_ 至 _END_ 項結(jié)果，共 _TOTAL_ 項","sInfoEmpty": "顯示第 0 至 0 項結(jié)果，共 0 項","sInfoFiltered": "(由 _MAX_ 項結(jié)果過濾)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中數(shù)據(jù)為空","sLoadingRecords": "載入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首頁","sPrevious": "上頁","sNext": "下頁","sLast": "末頁"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"} }示例：
$(document).ready(function() {$('#example').DataTable( {"language": chineseLang//chineseLang是語言包對象，如上所示} ); } );?
截止到此，datatable的簡單應(yīng)用的過完了，簡單應(yīng)用并未涉及到動態(tài)加載數(shù)據(jù)，服務(wù)端渲染等等，下面將在高級應(yīng)用中學(xué)習(xí)到。
我是按照官網(wǎng)示列從頭到尾捋的，并沒做太多合并學(xué)習(xí)，所以，還是多看官網(wǎng)吧。
?
3.進階學(xué)習(xí)高級初始化
Examples index，示例索引里包含了datatables的所有動態(tài)示列，然后頁面中開頭也說了，“實踐出真知”（One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible.?）。那么開始吧，通過示列學(xué)習(xí)如何使用datatables!
?
DOM / jQuery events
示列地址
Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with events.
事件被分配給（assigned to）表格對用戶交互特別有用（exceptionally useful for user interaction），但是你必須意識到（must be aware）DataTables會根據(jù)需要從DON中添加和刪除行。因此（ As such），當(dāng)處理事件時（when working with events），這可能導(dǎo)致（lead to ）奇怪的打嗝（hiccup ？？）。
示列如下：
$(document).ready(function() {var table = $('#example').DataTable();$('#example tbody').on('click', 'tr', function () {var data = table.row( this ).data();alert( 'You clicked on '+data[0]+'\'s row' );} ); } );此示列給表格行綁定了點擊事件，并通過datatable返回的實例對象table，調(diào)用了datatable的api返回了當(dāng)前行數(shù)據(jù)。
?
DataTables events
實例地址
DataTables會以標(biāo)準(zhǔn)jQuery方式觸發(fā)許多自定義事件（盡管請注意dt必須使用命名空間），允許代碼在發(fā)生這些事件時執(zhí)行自定義操作。
我修改了一下示列，將操作觸發(fā)的事件類型輸出到了控制臺：
var table = $('#example').DataTable();$('#example').on('order.dt', function () {console.log("排序")}).on('search.dt', function () {console.log('搜索');}).on('page.dt', function () {console.log('分頁');});此時，點擊表格表頭排序，控制臺輸出了，“排序”，“搜索”。而你進行搜索和點擊分頁的時候的時候。控制臺只會輸出對應(yīng)的“搜索”，“分頁”。
這是為什么呢？
order事件?說明：
order只要排序表中的數(shù)據(jù)，就會觸發(fā)該事件。這通常由最終用戶對列進行排序觸發(fā)，但也可以通過該order()方法啟動，并在完全重繪（通過調(diào)用draw()）時發(fā)生。
search事件?說明：
search只要全局搜索或列搜索選項（包括來自API的調(diào)用search()）（例如）觸發(fā)了表的搜索，就會觸發(fā)該事件。此外，完全重繪（通過調(diào)用draw()）方法將導(dǎo)致重新搜索表。
都提到了draw()方法，那看看draw方法說明：
當(dāng)您執(zhí)行添加或刪除行的操作時，更改表的排序，過濾或分頁特征，您將希望DataTables更新顯示以反映這些更改。此功能是為此目的而提供的......
order 事件觸發(fā)的完全重繪導(dǎo)致重新搜索表，則觸發(fā)了search事件。如果還沒理解，將代碼改為如下，打開控制臺再感受一下。
var table = $('#example').DataTable();$('#example').on('order.dt', function () {console.log("排序")}).on('search.dt', function () {console.log('搜索');}).on('page.dt', function () {console.log('分頁');});table.order([ [5, 'desc'] ]).draw( false );?
Column rendering （列渲染）
示列地址
Each column has an optional rendering control called columns.render which can be used to process the content of each cell before the data is used. columns.render has a wide array of options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the content of a cell, as shown here.
每列都有一個可選的（optional? 記憶技巧：option 選擇 + al …的 → 可選擇的）渲染控制器叫?columns.render 可以（can be used）在數(shù)據(jù)使用之前使用它來處理每個單元格的內(nèi)容.....
下方示列顯示人員的年齡與第一列中的姓名相結(jié)合，隱藏年齡列。此技術(shù)可用于添加鏈接，根據(jù)內(nèi)容規(guī)則分配顏色以及您需要的任何其他形式的文本操作。
$(document).ready(function() {$('#example').DataTable( {"columnDefs": [{// The `data` parameter refers to the data for the cell (defined by the// `data` option, which defaults to the column being worked with, in// this case `data: 0`.// “data”參數(shù)指的是(當(dāng)前)單元格的數(shù)據(jù)（由“data”選項定義，默認(rèn)為正在使用的列，在本例中//為“data：0”）。"render": function ( data, type, row ) {console.log(data);console.log(type);console.log(row);return data +' ('+ row[3]+')';//如果行數(shù)據(jù)為Object 此處取值為對應(yīng)key，如： //return data +' ('+ row["key"]+')'},"targets": 0},{ "visible": false, "targets": [ 3 ] }//隱藏了第三列]} ); } );更詳細(xì)的用法可在?columns.render ?中看到，包括如下等等
從對象數(shù)組創(chuàng)建逗號分隔列表：
$('#example').dataTable( {"ajaxSource": "sources/deep.txt","columns": [{ "data": "engine" },{ "data": "browser" },{"data": "platform","render": "[, ].name"}] } );作為對象，為不同類型提取不同的數(shù)據(jù)：
// This would be used with a data source such as: // { "phone": 5552368, "phone_filter": "5552368 555-2368", "phone_display": "555-2368", ... } // Here the `phone` integer is used for sorting and type detection, while `phone_filter` // (which has both forms) is used for filtering for if a user inputs either format, while // the formatted phone number is the one that is shown in the table. $('#example').dataTable( {"columnDefs": [ {"targets": 0,"data": null, // Use the full data source object for the renderer's source"render": {"_": "phone","filter": "phone_filter","display": "phone_display"}} ] } );上例子中，filter 使用的過濾搜索數(shù)據(jù)phone_filter數(shù)據(jù)，display顯示則使用phone_display數(shù)據(jù)。
?
Page length options （表格顯示條目數(shù)選項）
示列地址
$(document).ready(function() {$('#example').DataTable( {//二維數(shù)組，它將第一個內(nèi)部數(shù)組用作頁面長度值，第二個內(nèi)部數(shù)組用作顯示的選項。"lengthMenu": [[10, 25, 50, -1], ['10條', '25個', '50條數(shù)據(jù)', "All"]]} );} );?
Read HTML to data objects （將HTML讀取到數(shù)據(jù)對象）
示列地址
When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the table into an array that DataTables stores internally. Each array element represents a column.
當(dāng)datatables從html表讀取表內(nèi)容（rather than而不是Ajax 或 JS數(shù)據(jù)源），默認(rèn)情況下，它將把表中的信息讀入DataTables內(nèi)部存儲的數(shù)組中。每個數(shù)組元素表示一個列。
HTML5 data-* attributes
table options?表格選項??
jQuery會將虛線字符串轉(zhuǎn)換為DataTables用于其選項的駝峰式表示法。例如data-page-length 用于表示pageLength。
cell data 單元格數(shù)據(jù)?
?
Setting defaults （設(shè)置默認(rèn)值）
示列地址
When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set dom to a common value so all tables get the same layout). This can be done using the $.fn.dataTable.defaults object.?
在多個頁面上使用DataTables時，將初始化默認(rèn)值設(shè)置為常用值通常很有用（例如，您可能希望設(shè)置 dom為公共值，以便所有表格都具有相同的布局）。這可以使用$.fn.dataTable.defaults對象完成。
$.extend( true, $.fn.dataTable.defaults, {"searching": false,"ordering": false } );$(document).ready(function() {$('#example').DataTable(); } );$.extend：
jQuery.extend() 函數(shù)用于將一個或多個對象的內(nèi)容合并到目標(biāo)對象。如果多個對象具有相同的屬性，則后者會覆蓋前者的屬性值。
$.extend( target [, object1 ] [, objectN ] )指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )警告:?不支持第一個參數(shù)傳遞 false 。
| deep | 可選。 Boolean類型 指示是否深度合并對象，默認(rèn)為false。如果該值為true，且多個對象的某個同名屬性也都是對象，則該"屬性對象"的屬性也將進行合并。 |
| target | Object類型 目標(biāo)對象，其他對象的成員屬性將被附加到該對象上。 |
| object1 | 可選。 Object類型 第一個被合并的對象。 |
| objectN | 可選。 Object類型 第N個被合并的對象。 |
?
Row created callback（行創(chuàng)建回調(diào)）
示列地址
The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the createdRow function is called once and once only. It is passed the create row node which can then be modified.
以下示例顯示了如何使用回調(diào)函數(shù)在繪制時格式化特定行。對于為顯示而生成的每一行，該 createdRow函數(shù)只調(diào)用一次和一次。它傳遞給創(chuàng)建行節(jié)點，然后可以對其進行修改。
$(document).ready(function() {$('#example').DataTable( {"createdRow": function ( row, data, index ,cell) {//row：剛剛創(chuàng)建的行元素，如：<tr role="row" class="odd">...</tr>//data:此行的原始數(shù)據(jù)源（數(shù)組或?qū)ο?#xff09;//index:DataTables內(nèi)部存儲中行的索引。//cell：從1.10.17開始：列的單元格。[td,td,td,td,td]if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {$('td', row).eq(5).addClass('highlight');}}} ); } );createdRow
在TR創(chuàng)建元素（并且TD已插入所有子元素）時執(zhí)行此回調(diào)，或者在使用DOM源時注冊，允許操作TR元素。這在使用延遲呈現(xiàn)（deferRender）或服務(wù)器端處理（serverSide）時特別有用，因此您可以在創(chuàng)建行時添加事件，類名信息或以其他方式格式化行。
deferRender描述：
默認(rèn)情況下，當(dāng)從一個Ajax或Javascript數(shù)據(jù)源的數(shù)據(jù)表的負(fù)載數(shù)據(jù)（ajax和data分別地），將創(chuàng)建所需的前期所有HTML元素。使用大型數(shù)據(jù)集時，此操作可能需要花費不少的時間，尤其是在IE6-8等舊版瀏覽器中。此選項允許DataTables僅在繪圖需要時才創(chuàng)建節(jié)點（表體中的行和單元格）。
作為一個例子來幫助說明這一點，如果你加載一個10,000行的數(shù)據(jù)集，但是一個只有10條記錄的分頁顯示長度，而不是創(chuàng)建所有10,000行，當(dāng)啟用延遲渲染時，DataTables將只創(chuàng)建10個。用戶對數(shù)據(jù)進行排序，分頁或過濾，將自動創(chuàng)建下一個顯示所需的行。這有效地分散了在頁面的整個生命周期中創(chuàng)建行的負(fù)載。
$('#example').dataTable( {"ajax": "sources/arrays.txt","deferRender": true } );與columns.render的區(qū)別：
也可以閱讀渲染器文檔加深理解。
?
header/footer callback
示列地址
Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback), it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.
通過使用datatable提供的的header和footer回調(diào)函數(shù)，可以進行一些強有力的數(shù)據(jù)操作函數(shù)，例如統(tǒng)計表中的數(shù)據(jù)。
$(document).ready(function() {$('#example').DataTable( {"footerCallback": function ( row, data, start, end, display ) {var api = this.api(), data;// Remove the formatting to get integer data for summationvar intVal = function ( i ) {return typeof i === 'string' ?i.replace(/[\$,]/g, '')*1 :typeof i === 'number' ?i : 0;};// Total over all pagestotal = api.column( 4 ).data().reduce( function (a, b) {return intVal(a) + intVal(b);}, 0 );// Total over this pagepageTotal = api.column( 4, { page: 'current'} ).data().reduce( function (a, b) {return intVal(a) + intVal(b);}, 0 );// Update footer$( api.column( 4 ).footer() ).html('$'+pageTotal +' ( $'+ total +' total)');}} ); } );?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://my.oschina.net/swmhxhs/blog/2991067
總結(jié)
以上是生活随笔為你收集整理的datatables使用指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java程序打包成exe安装包总结
- 下一篇： Android 引用第三方开源库,出现冲