利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

jquery datatables 插件是一个优秀的表格插件，是后台工程师的福音！它提供了针对数据表格的排序、浏览器分页、服务器分页、查询、格式化等功能。datatables 官网也提供了大量的演示和详细的文档进行说明，为了方便使用，这里进行详细说明。

去官网： 下载最新版本是v1.10.12。

在页面引入:

<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>标头即可

<div class="widget-content nopadding">
<table id="archives-table" class="table table-bordered data-table mydatatable">
<thead>
<tr>
<th>编号</th>
<th>标题</th>
<th>所属类别</th>
<th>浏览量</th>
<th>评论量</th>
<th>点赞量</th>
<th>状态</th>
<th>操作</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div> 

客户端jquery：

$('#archives-table').datatable({
"olanguage": {
//国际化
"sprocessing": "<img src='/content_admin/img/spinner.gif'> 努力加载数据中...",
"slengthmenu": "每页显示 _menu_  条结果",
"szerorecords": "没有匹配结果",
"sinfo": "总共_pages_ 页，显示第_start_ 到第 _end_ ，筛选之后得到 _total_ 条，初始_max_ 条 ",
"infoempty": "0条记录", //筛选为空时左下角的显示"
"sinfoempty": "没有数据",
"sinfofiltered": "(从_max_条数据中检索)",//筛选之后的左下角筛选提示，
"szerorecords": "没有检索到数据",
//"ssearch": '<span class="label label-success"> 搜索 </span>'
},
//"bserverside": false, //第一种场景:服务端一次性取出所有数据,完全由客户端来处理这些数据.此时为false
"bserverside": true, //第二种场景:服务端处理分页后数据,客户端呈现,此时为true.但此时aocolumns要变,将'sname'换成mdataprop,同时自定义列也要有对应的数据
"sservermethod": "get",
"sajaxsource": "/admin/adminarchives/getarchivesjson", //ajax url地址
"bprocessing": true,
"bpaginate": true,
"spaginationtype": "full_numbers",
"bjqueryui": true, //客户端传给服务器的参数为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 = "已发布";
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="#">发 布</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": [
{
//报错：datatables warning : requested unknown parameter '1' from the data source for row 0
//加上这段定义就不出错了。
sdefaultcontent: '',
atargets: ['_all']
}
]
});

jquery.datatables插件的两种应用场景

场景一：服务端一次性取出所有数据,完全由客户端来处理这些数据.此时"bserverside": false,

服务端代码:

public jsonresult getarchivesjson(jqdatatableparameter tableparam)
{
#region 1.0 场景一
////1. 获取所有文章
//list<article> datasource = articleservice.getdatalistby(a => true, a => a.id);
////2. 构造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是一个数组，数组里面还是字符串数组
//return json(new
//{
// secho = 1,
// itotalrecords = datasource.count,
// itotaldisplayrecords = data.count(),
// aadata = data
//}, jsonrequestbehavior.allowget); 
#endregion
}
public jsonresult getarchivesjson(jqdatatableparameter tableparam)

场景二：服务端处理分页后数据,客户端呈现,此时为true，

服务端代码:

public jsonresult getarchivesjson(jqdatatableparameter tableparam)
{
#region 2.0 场景二
//客户端需要"bserverside": true, 用mdataprop绑定字段,obj.adata.id获取字段(.属性)
//0.0 全部数据
list<article> datasource = articleservice.getdatalistby(a => true);
//datasource = datasource.orderbydescending(a => a.subtime).tolist();
//1.0 首先获取datatable提交过来的参数
string echo = tableparam.secho; //用于客户端自己的校验
int datastart = tableparam.idisplaystart;//要请求的该页第一条数据的序号
int pagesize = tableparam.idisplaylength == -1 ? datasource.count : tableparam.idisplaylength;//每页容量（=-1表示取全部数据）
string search = tableparam.ssearch;
//2.0 根据参数(起始序号、每页容量、参训参数)查询数据
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 构造datatable所需要的数据json对象...aadata里面应是一个二维数组：即里面是一个数组[["","",""],[],[],[]]
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 构造datatable所需要的数据json对象...aadata里面应是一个二维数组：即里面是一个数组[["","",""],[],[],[]]
return json(new
{
secho = echo,
itotalrecords = datasource.count(),
itotaldisplayrecords = datasource.count(),
aadata = data
}, jsonrequestbehavior.allowget);
}
#endregion
}
public jsonresult getarchivesjson(jqdatatableparameter tableparam)

其中datatables发送的参数被分装在jqdatatableparameter.cs中：

/// <summary>
/// 在服务器端,可以通过以下请求参数来获得当前客户端的操作信息
/// jquery $('selector').datatable()插件 参数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每页显示的数量
/// </summary>
public int idisplaylength { get; set; }
/// <summary>
/// 4.0搜索字段
/// </summary>
public string ssearch { get; set; }
/// <summary>
/// 5.0列数
/// </summary>
public int icolumns { get; set; }
/// <summary>
/// 6.0排序列的数量
/// </summary>
public int isortingcols { get; set; }
/// <summary>
/// 7.0逗号分割所有的列
/// </summary>
public string scolumns { get; set; }
}
public class jqdatatableparameter

后台效果展示：

以上就是对datatable插件的使用说明。

以上所述是小编给大家介绍的利用asp.net mvc和bootstrap快速搭建个人博客之后台datatable数据列表，希望对大家有所帮助