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

如何利用ASP.NET MVC和Bootstrap快速搭建个人博客中的后台dataTable数据列表，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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

去官网：https://www.datatables.net/ 下载最新版本是v1.10.12。

在页面引入:

HTML代码： 写上标头即可

编号
标题
所属类别
浏览量
评论量
点赞量
状态
操作
操作
操作

客户端jQuery：

$('#archives-table').dataTable({"oLanguage": {//国际化"sProcessing": " 努力加载数据中...","sLengthMenu": "每页显示 _MENU_  条结果","sZeroRecords": "没有匹配结果","sInfo": "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ","infoEmpty": "0条记录", //筛选为空时左下角的显示""sInfoEmpty": "没有数据","sInfoFiltered": "(从_MAX_条数据中检索)",//筛选之后的左下角筛选提示，"sZeroRecords": "没有检索到数据",//"sSearch": ' 搜索 '},//"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 '' + data + '';}},{ "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 = '发 布';if (row.Status == "1")actionstr = '禁 用';return actionstr;}},{ //自定义列 : real删除"mDataProp": "null","sWidth": "6%","bSearchable": false,"bStorable": false,"mRender": function (data, type, row) {return '';}},{ //自定义列：编辑"mDataProp": "null","sWidth": "6%","bSearchable": false,"bStorable": false,"mRender": function (data, type, row) {return '';}}],"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
 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
 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
(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
(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中：

/// 
/// 在服务器端,可以通过以下请求参数来获得当前客户端的操作信息/// jquery $('selector').datatable()插件 参数model/// 
public class jqDataTableParameter{/// 
/// 1.0 DataTable用来生成的信息/// 
 public string sEcho { get; set; }/// 
/// 2.0分页起始索引/// 
public int iDisplayStart { get; set; }/// 
/// 3.0每页显示的数量/// 
public int iDisplayLength { get; set; }/// 
/// 4.0搜索字段/// 
public string sSearch { get; set; }/// 
/// 5.0列数/// 
public int iColumns { get; set; }/// 
/// 6.0排序列的数量/// 
public int iSortingCols { get; set; }/// 
/// 7.0逗号分割所有的列/// 
public string sColumns { get; set; }}public class jqDataTableParameter

后台效果展示：

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

关于如何利用ASP.NET MVC和Bootstrap快速搭建个人博客中的后台dataTable数据列表问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注行业资讯频道了解更多相关知识。