JS----dataTables分頁排序
效果圖：
屬性：
DataTables的一些基礎屬性配置：
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示資料數量
"bFilter": true, //過濾功能
"bSort": false, //排序功能
"bInfo": true,//頁尾資訊
"bAutoWidth": true//自動寬度1.排序控制：
$(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, { "asSorting": [ "asc" ] }, { "asSorting": [ "desc", "asc", "asc" ] }, { "asSorting": [ ] }, { "asSorting": [ ] } ] } ); } );
2.定義每頁顯示資料數量：
$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );3.改變文字顯示：
$(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' />" } } ); } );
4.水平限制寬度：
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );5.顯示數字的翻頁樣式：
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );6.狀態儲存，使用了翻頁或者改變了每頁顯示資料數量，會儲存在cookie中，下回訪問時會顯示上一次關閉頁面時的內容：
$(document).ready(function() { $('#example').dataTable( { "bStateSave": true } ); } );
7.改變頁面上元素的位置：
$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每頁顯示數量
//f - 過濾輸入
//t - 表單Table
//i - 資訊
//p - 翻頁
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>8.隱藏某些列：
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );9.資料排序：
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );屬性表：
|
屬性名稱 |
取值侷限 |
申明 |
|
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 |
指定恰當的時辰縮起遷移轉變檢視 |
|
bSortCellsTop |
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獲取資料 |
|
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"" |
用於指定分頁器風格 |
|
sScrollXInner |
string default ""disabled"" |
又是程度遷移轉變相干的，沒搞懂啥意思 |
Code:
<span style="font-size:10px;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dataTables</title>
<link href="dataTables.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="jquery.min.js"></script>
<script src="dataTables.js"></script>
<div>
<table id="example" class="display dataTable">
<thead>
<th>姓名</th>
<th>位置</th>
<th>年齡</th>
<th>薪水</th>
</thead>
<tbody>
<tr>
<td>1張三</td>
<td>北京</td>
<th>23</th>
<th>￥5000</th>
</tr>
<tr>
<td>2李四</td>
<td>上海</td>
<th>24</th>
<th>￥4000</th>
</tr>
<tr>
<td>3王五</td>
<td>廣州</td>
<th>25</th>
<th>￥7000</th>
</tr>
<tr>
<td>4趙六</td>
<td>深圳</td>
<th>26</th>
<th>￥10000</th>
</tr>
<tr>
<td>5趙六</td>
<td>深圳</td>
<th>27</th>
<th>￥10000</th>
</tr>
<tr>
<td>6趙六</td>
<td>深圳</td>
<th>28</th>
<th>￥10000</th>
</tr>
<tr>
<td>7趙六</td>
<td>深圳</td>
<th>29</th>
<th>￥10000</th>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready( function () {
$('#example').DataTable();
} );
</script>
</body>
</html</span>