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

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

 $('#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'] } ] });

 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)

 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)

 /// 
 /// 在服务器端,可以通过以下请求参数来获得当前客户端的操作信息 /// 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