jQuery dataTables 插件是一個(gè)優(yōu)秀的表格插件，是后臺(tái)工程師的福音！它提供了針對(duì)數(shù)據(jù)表格的排序、瀏覽器分頁(yè)、服務(wù)器分頁(yè)、查詢(xún)、格式化等功能。dataTables 官網(wǎng)也提供了大量的演示和詳細(xì)的文檔進(jìn)行說(shuō)明，為了方便使用，這里進(jìn)行詳細(xì)說(shuō)明。
去官網(wǎng)：https://www.datatables.net/ 下載最新版本是v1.10.12。
在頁(yè)面引入:
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代碼： 寫(xiě)上thead>/thead>標(biāo)頭即可
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>所屬類(lèi)別/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>
客戶(hù)端jQuery：
$('#archives-table').dataTable({
"oLanguage": {
//國(guó)際化
"sProcessing": "img src='/Content_Admin/img/spinner.gif'> 努力加載數(shù)據(jù)中...",
"sLengthMenu": "每頁(yè)顯示nbsp;_MENU_ nbsp;條結(jié)果",
"sZeroRecords": "沒(méi)有匹配結(jié)果",
"sInfo": "總共_PAGES_ 頁(yè)，顯示第_START_ 到第 _END_ ，篩選之后得到 _TOTAL_ 條，初始_MAX_ 條 ",
"infoEmpty": "0條記錄", //篩選為空時(shí)左下角的顯示"
"sInfoEmpty": "沒(méi)有數(shù)據(jù)",
"sInfoFiltered": "(從_MAX_條數(shù)據(jù)中檢索)",//篩選之后的左下角篩選提示，
"sZeroRecords": "沒(méi)有檢索到數(shù)據(jù)",
//"sSearch": 'span class="label label-success">nbsp;搜索nbsp;/span>'
},
//"bServerSide": false, //第一種場(chǎng)景:服務(wù)端一次性取出所有數(shù)據(jù),完全由客戶(hù)端來(lái)處理這些數(shù)據(jù).此時(shí)為false
"bServerSide": true, //第二種場(chǎng)景:服務(wù)端處理分頁(yè)后數(shù)據(jù),客戶(hù)端呈現(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, //客戶(hù)端傳給服務(wù)器的參數(shù)為sSearch
'bFilter': false,
//'bsearch':true,
'bLengthChange': true,
'aLengthMenu': [
[5, 15, 20, -1],
[5, 15, 20, "全部"] // change per page values here
],
'iDisplayLength': 7, //每頁(yè)顯示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ù),完全由客戶(hù)端來(lái)處理這些數(shù)據(jù).此時(shí)"bServerSide": false,
服務(wù)端代碼:
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
{
#region 1.0 場(chǎng)景一
////1. 獲取所有文章
//ListArticle> 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ù)端處理分頁(yè)后數(shù)據(jù),客戶(hù)端呈現(xiàn),此時(shí)為true，
服務(wù)端代碼:
public JsonResult GetArchivesJson(jqDataTableParameter tableParam)
{
#region 2.0 場(chǎng)景二
//客戶(hù)端需要"bServerSide": true, 用mDataProp綁定字段,obj.aData.Id獲取字段(.屬性)
//0.0 全部數(shù)據(jù)
ListArticle> DataSource = articleService.GetDataListBy(a => true);
//DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList();
//1.0 首先獲取datatable提交過(guò)來(lái)的參數(shù)
string echo = tableParam.sEcho; //用于客戶(hù)端自己的校驗(yàn)
int dataStart = tableParam.iDisplayStart;//要請(qǐng)求的該頁(yè)第一條數(shù)據(jù)的序號(hào)
int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayLength;//每頁(yè)容量（=-1表示取全部數(shù)據(jù)）
string search = tableParam.sSearch;
//2.0 根據(jù)參數(shù)(起始序號(hào)、每頁(yè)容量、參訓(xùn)參數(shù))查詢(xún)數(shù)據(jù)
if (!String.IsNullOrEmpty(search))
{
var data = DataSource.Where(a => a.Title.Contains(search) ||
a.Keywords.Contains(search) ||
a.Contents.Contains(search))
.SkipArticle>(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.SkipArticle>(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中：
/// summary>
/// 在服務(wù)器端,可以通過(guò)以下請(qǐng)求參數(shù)來(lái)獲得當(dāng)前客戶(hù)端的操作信息
/// jquery $('selector').datatable()插件 參數(shù)model
/// /summary>
public class jqDataTableParameter
{
/// summary>
/// 1.0 DataTable用來(lái)生成的信息
/// /summary>
public string sEcho { get; set; }
/// summary>
/// 2.0分頁(yè)起始索引
/// /summary>
public int iDisplayStart { get; set; }
/// summary>
/// 3.0每頁(yè)顯示的數(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插件的使用說(shuō)明。
以上所述是小編給大家介紹的利用ASP.NET MVC和Bootstrap快速搭建個(gè)人博客之后臺(tái)dataTable數(shù)據(jù)列表，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- 詳解用nginx+WordPress搭建個(gè)人博客全流程
- Hexo已經(jīng)看膩了，來(lái)手把手教你使用VuePress搭建個(gè)人博客
- 手把手教你用Hexo+Github搭建屬于自己的博客(詳細(xì)圖文)
- 利用ASP.NET MVC和Bootstrap快速搭建響應(yīng)式個(gè)人博客站(一)
- 在CentOS系統(tǒng)上從零開(kāi)始搭建WordPress博客的全流程記錄
- Flask入門(mén)教程實(shí)例：搭建一個(gè)靜態(tài)博客
- 用Pelican搭建一個(gè)極簡(jiǎn)靜態(tài)博客系統(tǒng)過(guò)程解析
