jQuery dataTables 網格

對於服務器來講，能夠經過請求參數來得到當前的操做信息。

類型	名稱	說明
int	iDisplayStart	顯示的起始索引
int	iDisplayLength	顯示的行數
int	iColumns	顯示的列數
string	sSearch	全局搜索字段
boolean	bEscapeRegex	全局搜索是否正則
boolean	bSortable_(int)	表示一列是否在客戶端被標誌位可排序
boolean	bSearchable_(int)	表示一列是否在客戶端被標誌位可搜索
string	sSearch_(int)	個別列的搜索
boolean	bEscapeRegex_(int)	個別列是否使用正則搜索
int	iSortingCols	排序的列數
int	iSortCol_(int)	被排序的列
string	sSortDir_(int)	排序的方向 "desc" 或者 "asc".
string	sEcho	DataTables 用來生成的信息

 

服務器應該返回以下的 JSON 格式數據

類型	名稱	說明
int	iTotalRecords	實際的行數
int	iTotalDisplayRecords	過濾以後，實際的行數。
string	sEcho	來自客戶端 sEcho 的沒有變化的複製品，
string	sColumns	可選，以逗號分隔的列名，
array array mixed	aaData	數組的數組，表格中的實際數據。

 

參考列表

屬性名稱	取值侷限	申明
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""	又是程度遷移轉變相干的，沒搞懂啥意思

 

datatabels sDom:

$(document).ready(function()
 {

    $('#example').dataTable({

    "sDom":'<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>'

    });

});


//自定義佈局

//* 
 l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class    * Examples: <"wrapper"flipt>, <lf<t>ip>

 
//語法結構

/*

    <>
 表示一個閉合DIV

    例：<>
 = <div></div>

     

    <"類名稱">
 表示一個帶類名稱的閉合DIV

    例：<"top">
 = <div class="top"></div>

     

    l
 - 每行顯示的記錄數

    f
 - 搜索框

    t
 - 表格

    i
 - 表格信息

    p
 - 分頁條

    r
 - 加載時的進度條

*/

 

//綜合應用

/*

    例：<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>

    表示

    <div
 class="top">

        表格信息(i)

        搜索框(f)

        每行顯示的記錄數(l)

        分頁條(p)

        <div
 class="clear"></div>

    </div>

    加載時的進度條(bottom)

    表格(t)

    <div
 class="top">

        表格信息(i)

        每行顯示的記錄數(l)

        分頁條(p)

        <div
 class="clear"></div>

    </div>

*/

View Code

 

 

 

DataTables官網

C# 中結合 LINQ 使用 DataTables 進行服務端處理

另外一個 Datatables.Mvc

又一個