jQuery dataTables 插件是一個(gè)優(yōu)秀的表格插件，是后臺(tái)工程師的福音！它提供了針對(duì)數(shù)據(jù)表格的排序、瀏覽器分頁、服務(wù)器分頁、查詢、格式化等功能。dataTables 官網(wǎng)也提供了大量的演示和詳細(xì)的文檔進(jìn)行說明，為了方便使用，這里進(jìn)行詳細(xì)說明。
去官網(wǎng)：https://www.datatables.net/ 下載最新版本是v1.10.12。
在頁面引入:
|
1
2
3
4
5
|
<link rel="stylesheet" href="~/Content_Admin/css/bootstrap.min.css" /><link rel="stylesheet" href="~/Content_Admin/css/bootstrap-responsive.min.css" /><script type="text/javascript" src="~/Content_Admin/js/jquery.min.js"></script><script type="text/javascript" src="~/Content_Admin/js/bootstrap.min.js"></script><script type="text/javascript" src="~/Content_Admin/js/jquery.dataTables.min.js"></script> |
HTML代碼： 寫上<thead></thead>標(biāo)頭即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div class="widget-content nopadding"><table id="archives-table" class="table table-bordered data-table mydatatable"><thead><tr><th>編號(hào)</th><th>標(biāo)題</th><th>所屬類別</th><th>瀏覽量</th><th>評(píng)論量</th><th>點(diǎn)贊量</th><th>狀態(tài)</th><th>操作</th><th>操作</th><th>操作</th></tr></thead><tbody></tbody></table></div> |
客戶端jQuery：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
$('#archives-table').dataTable({"oLanguage": {//國際化"sProcessing": "<img src='/Content_Admin/img/spinner.gif'> 努力加載數(shù)據(jù)中...","sLengthMenu": "每頁顯示 _MENU_ 條結(jié)果","sZeroRecords": "沒有匹配結(jié)果","sInfo": "總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選之后得到 _TOTAL_ 條，初始_MAX_ 條 ","infoEmpty": "0條記錄", //篩選為空時(shí)左下角的顯示""sInfoEmpty": "沒有數(shù)據(jù)","sInfoFiltered": "(從_MAX_條數(shù)據(jù)中檢索)",//篩選之后的左下角篩選提示，"sZeroRecords": "沒有檢索到數(shù)據(jù)",//"sSearch": '<span class="label label-success"> 搜索 </span>'},//"bServerSide": false, //第一種場(chǎng)景:服務(wù)端一次性取出所有數(shù)據(jù),完全由客戶端來處理這些數(shù)據(jù).此時(shí)為false"bServerSide": true, //第二種場(chǎng)景:服務(wù)端處理分頁后數(shù)據(jù),客戶端呈現(xiàn),此時(shí)為true.但此時(shí)aoColumns要變,將'sName'換成mDataProp,同時(shí)自定義列也要有對(duì)應(yīng)的數(shù)據(jù)"sServerMethod": "GET","sAjaxSource": "/Admin/AdminArchives/GetArchivesJson", //ajax Url地址"bProcessing": true,"bPaginate": true,"sPaginationType": "full_numbers","bJQueryUI": true, //客戶端傳給服務(wù)器的參數(shù)為sSearch'bFilter': false,//'bsearch':true,'bLengthChange': true,'aLengthMenu': [[5, 15, 20, -1],[5, 15, 20, "全部"] // change per page values here],'iDisplayLength': 7, //每頁顯示10條記錄'bAutoWidth': true,"scrollX": true,"aoColumns": [{ "sWidth": "5%", "mDataProp": "Id" },{"sWidth": "40%","mDataProp": "Title","mRender": function (data, type, row) {return '<a href="/Archives/Index/' + row.Id + '\">' + data + '</a>';}},{ "sWidth": "10%", "mDataProp": "CategoryName" },{ "sWidth": "6%", "mDataProp": "ViewCount", "bStorable": true },{ "sWidth": "6%", "mDataProp": "CommentCount", "bStorable": true },{ "sWidth": "6%", "mDataProp": "Digg", "bStorable": true },{"sWidth": "6%","mDataProp": "Status","mRender": function (data, type, row) {var value = "已發(fā)布";if (data == "0")value = "禁用";return value;}},{ //自定義列 : 啟用/禁用"mDataProp": "null","sWidth": "6%","bSearchable": false,"bStorable": false,"mRender": function (data, type, row) {var actionstr = '<a id="publicarticle" class="publicaction" target-id="' + row.Id + '" href="#">發(fā) 布</a>';if (row.Status == "1")actionstr = '<a id="delarticle" class="delaction" target-id="' + row.Id + '" href="#">禁 用</a>';return actionstr;}},{ //自定義列 : real刪除"mDataProp": "null","sWidth": "6%","bSearchable": false,"bStorable": false,"mRender": function (data, type, row) {return '<a id="realdelarticle" class="tip" target-id="' + row.Id + '" href="#"><i class="icon-remove"></i></a>';}},{ //自定義列：編輯"mDataProp": "null","sWidth": "6%","bSearchable": false,"bStorable": false,"mRender": function (data, type, row) {return '<a class="tip" href="/Admin/AdminArchives/EditArchive/' + row.Id + '"><i class="icon-pencil"></i></a>';}}],"aoColumnDefs": [{//報(bào)錯(cuò)：DataTables warning : Requested unknown parameter '1' from the data source for row 0//加上這段定義就不出錯(cuò)了。sDefaultContent: '',aTargets: ['_all']}]}); |
Jquery.DataTables插件的兩種應(yīng)用場(chǎng)景
場(chǎng)景一：服務(wù)端一次性取出所有數(shù)據(jù),完全由客戶端來處理這些數(shù)據(jù).此時(shí)"bServerSide": false,
服務(wù)端代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
public JsonResult GetArchivesJson(jqDataTableParameter tableParam){#region 1.0 場(chǎng)景一////1. 獲取所有文章//List<Article> DataSource = articleService.GetDataListBy(a => true, a => a.Id);////2. 構(gòu)造aaData//var data = DataSource.Select(a => new object[]{// a.Id,// a.Title+ " ("+a.SubTime.ToString()+")",// (categoryService.GetDataListBy(c=>c.Id==a.CategoryId)[0]).Name,// a.ViewCount,// commentService.GetDataListBy(c=>c.CmtArtId==a.Id).Count,// a.Digg,// a.Status==1?"正常":"刪除"//});////3. 返回json,aaData是一個(gè)數(shù)組，數(shù)組里面還是字符串?dāng)?shù)組//return Json(new//{// sEcho = 1,// iTotalRecords = DataSource.Count,// iTotalDisplayRecords = data.Count(),// aaData = data//}, JsonRequestBehavior.AllowGet); #endregion}public JsonResult GetArchivesJson(jqDataTableParameter tableParam) |
場(chǎng)景二：服務(wù)端處理分頁后數(shù)據(jù),客戶端呈現(xiàn),此時(shí)為true，
服務(wù)端代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
public JsonResult GetArchivesJson(jqDataTableParameter tableParam){#region 2.0 場(chǎng)景二//客戶端需要"bServerSide": true, 用mDataProp綁定字段,obj.aData.Id獲取字段(.屬性)//0.0 全部數(shù)據(jù)List<Article> DataSource = articleService.GetDataListBy(a => true);//DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();//1.0 首先獲取datatable提交過來的參數(shù)string echo = tableParam.sEcho; //用于客戶端自己的校驗(yàn)int dataStart = tableParam.iDisplayStart;//要請(qǐng)求的該頁第一條數(shù)據(jù)的序號(hào)int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayLength;//每頁容量（=-1表示取全部數(shù)據(jù)）string search = tableParam.sSearch;//2.0 根據(jù)參數(shù)(起始序號(hào)、每頁容量、參訓(xùn)參數(shù))查詢數(shù)據(jù)if (!String.IsNullOrEmpty(search)){var data = DataSource.Where(a => a.Title.Contains(search) ||a.Keywords.Contains(search) ||a.Contents.Contains(search)).Skip<Article>(dataStart).Take(pageSize).Select(a => new{Id = a.Id,Title = a.Title + " (" + a.SubTime.ToString() + ")",CategoryName = a.Category.Name,ViewCount = a.ViewCount,CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,Digg = a.Digg,Status = a.Status}).ToList();//3.0 構(gòu)造datatable所需要的數(shù)據(jù)json對(duì)象...aaData里面應(yīng)是一個(gè)二維數(shù)組：即里面是一個(gè)數(shù)組[["","",""],[],[],[]]return Json(new{sEcho = echo,iTotalRecords = DataSource.Count(),iTotalDisplayRecords = DataSource.Count(),aaData = data}, JsonRequestBehavior.AllowGet);}else{var data = DataSource.Skip<Article>(dataStart).Take(pageSize).Select(a => new{Id = a.Id,Title = a.Title + " (" + a.SubTime.ToString() + ")",CategoryName = a.Category.Name,ViewCount = a.ViewCount,CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,Digg = a.Digg,Status = a.Status}).ToList();//3.0 構(gòu)造datatable所需要的數(shù)據(jù)json對(duì)象...aaData里面應(yīng)是一個(gè)二維數(shù)組：即里面是一個(gè)數(shù)組[["","",""],[],[],[]]return Json(new{sEcho = echo,iTotalRecords = DataSource.Count(),iTotalDisplayRecords = DataSource.Count(),aaData = data}, JsonRequestBehavior.AllowGet);}#endregion}public JsonResult GetArchivesJson(jqDataTableParameter tableParam) |
其中dataTables發(fā)送的參數(shù)被分裝在jqDataTableParameter.cs中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
/// <summary>/// 在服務(wù)器端,可以通過以下請(qǐng)求參數(shù)來獲得當(dāng)前客戶端的操作信息/// jquery $('selector').datatable()插件 參數(shù)model/// </summary>public class jqDataTableParameter{/// <summary>/// 1.0 DataTable用來生成的信息/// </summary> public string sEcho { get; set; }/// <summary>/// 2.0分頁起始索引/// </summary>public int iDisplayStart { get; set; }/// <summary>/// 3.0每頁顯示的數(shù)量/// </summary>public int iDisplayLength { get; set; }/// <summary>/// 4.0搜索字段/// </summary>public string sSearch { get; set; }/// <summary>/// 5.0列數(shù)/// </summary>public int iColumns { get; set; }/// <summary>/// 6.0排序列的數(shù)量/// </summary>public int iSortingCols { get; set; }/// <summary>/// 7.0逗號(hào)分割所有的列/// </summary>public string sColumns { get; set; }}public class jqDataTableParameter |
后臺(tái)效果展示：
以上就是對(duì)datatable插件的使用說明。
以上所述是小編給大家介紹的利用ASP.NET MVC和Bootstrap快速搭建個(gè)人博客之后臺(tái)dataTable數(shù)據(jù)列表，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)服務(wù)器之家網(wǎng)站的支持！
原文鏈接：http://www.cnblogs.com/haust/p/5628829.html
