你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET MVC+Bootstrap个人博客之后台dataTable数据列表(五)


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

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

      也可以去我的小站下载:http://www.zynblog.com/Archives/Index/14

(小站地址:http://www.zynblog.com)

在页面引入:

  <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='http://www.cnblogs.com//Content_Admin/img/spinner.gif'> 努力加载数据中...",          "sLengthMenu": "每页显示&nbsp;_MENU_ &nbsp;条结果",          "sZeroRecords": "没有匹配结果",          "sInfo": "总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",          "infoEmpty": "0条记录", //筛选为空时左下角的显示"          "sInfoEmpty": "没有数据",          "sInfoFiltered": "(从_MAX_条数据中检索)",//筛选之后的左下角筛选提示,          "sZeroRecords": "没有检索到数据",          //"sSearch": '<span >&nbsp;搜索&nbsp;</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="http://www.cnblogs.com//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"  target-id="' + row.Id + '" href="#">发 布</a>';               if (row.Status == "1")                 actionstr = '<a id="delarticle" 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"  target-id="' + row.Id + '" href="#"><i ></i></a>';            }          },           { //自定义列:编辑             "mDataProp": "null",             "sWidth": "6%",             "bSearchable": false,             "bStorable": false,             "mRender": function (data, type, row) {               return '<a href="http://www.cnblogs.com//Admin/AdminArchives/EditArchive/' + row.Id + '"><i ></i></a>';             }           }        ],        "aoColumnDefs": [          {            //报错:DataTables warning : Requested unknown parameter '1' from the data source for row 0            //加上这段定义就不出错了。            sDefaultContent: '',            aTargets: ['_all']          }        ]      });

jQuery

Jquery.DataTables插件的两种应用场景

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

服务端代码:

 1 public JsonResult GetArchivesJson(jqDataTableParameter tableParam) 2     { 3       #region 1.0 场景一 4       ////1. 获取所有文章 5       //List<Article> DataSource = articleService.GetDataListBy(a => true, a => a.Id); 6       ////2. 构造aaData 7       //var data = DataSource.Select(a => new object[]{ 8       // a.Id, 9       // a.Title+ " ("+a.SubTime.ToString()+")",10       // (categoryService.GetDataListBy(c=>c.Id==a.CategoryId)[0]).Name,11       // a.ViewCount,12       // commentService.GetDataListBy(c=>c.CmtArtId==a.Id).Count,13       // a.Digg,14       // a.Status==1?"正常":"删除"15       //});16       ////3. 返回json,aaData是一个数组,数组里面还是字符串数组17       //return Json(new18       //{19       //  sEcho = 1,20       //  iTotalRecords = DataSource.Count,21       //  iTotalDisplayRecords = data.Count(),22       //  aaData = data23       //}, JsonRequestBehavior.AllowGet); 24       #endregion25    }

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

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

服务端代码:

 1 public JsonResult GetArchivesJson(jqDataTableParameter tableParam) 2     { 3       #region 2.0 场景二 4       //客户端需要"bServerSide": true, 用mDataProp绑定字段,obj.aData.Id获取字段(.属性) 5  6       //0.0 全部数据 7       List<Article> DataSource = articleService.GetDataListBy(a => true); 8       //DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList(); 9 10       //1.0 首先获取datatable提交过来的参数11       string echo = tableParam.sEcho; //用于客户端自己的校验12       int dataStart = tableParam.iDisplayStart;//要请求的该页第一条数据的序号13       int pageSize = tableParam.iDisplayLength == -1 ? DataSource.Count : tableParam.iDisplayLength;//每页容量(=-1表示取全部数据)14       string search = tableParam.sSearch;15 16       //2.0 根据参数(起始序号、每页容量、参训参数)查询数据17       if (!String.IsNullOrEmpty(search))18       {19         var data = DataSource.Where(a => a.Title.Contains(search) ||20                 a.Keywords.Contains(search) ||21                  a.Contents.Contains(search))22           .Skip<Article>(dataStart)23            .Take(pageSize)24           .Select(a => new25            {26             Id = a.Id,27             Title = a.Title + " (" + a.SubTime.ToString() + ")",28             CategoryName = a.Category.Name,29             ViewCount = a.ViewCount,30             CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,31             Digg = a.Digg,32             Status = a.Status33            }).ToList();34 35         //3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组:即里面是一个数组[["","",""],[],[],[]]36         return Json(new37         {38           sEcho = echo,39           iTotalRecords = DataSource.Count(),40           iTotalDisplayRecords = DataSource.Count(),41           aaData = data42         }, JsonRequestBehavior.AllowGet);43       }44       else45       {46         var data = DataSource.Skip<Article>(dataStart)47                    .Take(pageSize)48                   .Select(a => new49                    {50                     Id = a.Id,51                     Title = a.Title + " (" + a.SubTime.ToString() + ")",52                     CategoryName = a.Category.Name,53                     ViewCount = a.ViewCount,54                     CommentCount = commentService.GetDataListBy(c => c.CmtArtId == a.Id).Count,55                     Digg = a.Digg,56                     Status = a.Status57                    }).ToList();58 59         //3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组:即里面是一个数组[["","",""],[],[],[]]60         return Json(new61         {62           sEcho = echo,63           iTotalRecords = DataSource.Count(),64           iTotalDisplayRecords = DataSource.Count(),65           aaData = data66         }, JsonRequestBehavior.AllowGet);67       }68       #endregion69     }

public JsonResult GetArchivesJson(jqDataTableParameter tableParam)

其中dataTables发送的参数被分装在jqDataTableParameter.cs中:

 1  /// <summary> 2   /// 在服务器端,可以通过以下请求参数来获得当前客户端的操作信息 3   /// jquery $('selector').datatable()插件 参数model 4   /// </summary> 5   public class jqDataTableParameter 6   { 7     /// <summary> 8     /// 1.0 DataTable用来生成的信息 9     /// </summary>    10     public string sEcho { get; set; }11 12     /// <summary>13     /// 2.0分页起始索引14     /// </summary>15     public int iDisplayStart { get; set; }16 17     /// <summary>18     /// 3.0每页显示的数量19     /// </summary>20     public int iDisplayLength { get; set; }21 22     /// <summary>23     /// 4.0搜索字段24     /// </summary>25     public string sSearch { get; set; }26 27     /// <summary>28     /// 5.0列数29     /// </summary>30     public int iColumns { get; set; }31 32     /// <summary>33     /// 6.0排序列的数量34     /// </summary>35     public int iSortingCols { get; set; }36 37     /// <summary>38     /// 7.0逗号分割所有的列39     /// </summary>40     public string sColumns { get; set; }41   }

public class jqDataTableParameter

后台效果展示:

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