datatable 服务端分页
因项目需求变动，需处理大量数据，更改成服务端分页，自己两天的学习笔记
datatable 1.10.7 百度云下载 密码：0ea1
先上图【 jqueryui风格】
"bJQueryUI": false, //是否使用 jQury的UI theme 默认风格
查询效果
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <link href="~/Scripts/DataTables-1.10.7/css/select.dataTables.min.css" rel="stylesheet" /> <link href="~/Scripts/DataTables-1.10.7/css/jquery.dataTables.css" rel="stylesheet" /> <link href="~/Scripts/framework/plugins/jqueryui/lxwJQueryUI.css" rel="stylesheet" /> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/framework/plugins/jqueryui/jquery-ui.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script src="~/Scripts/DataTables-1.10.7/js/jquery.dataTables.js"></script> <script src="~/Scripts/DataTables-1.10.7/js/dataTables.select.js"></script> <style> /*.selected { background-color: rgb(238, 211, 210) !important; }*/ </style> </head> <body> <div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">查询</h3> </div> <div class="panel-body"> </div> </div> <div class="widget-content nopadding"> <table id="archivestable" class="table table-bordered data-table mydatatable "> <thead> <tr> <th>编号</th> <th>标题</th> <th>内容</th> <th>浏览量</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> </div> <script type="text/javascript"> $(function () { var table; table = $('#archivestable').dataTable({ "bJQueryUI": false, //是否使用 jQury的UI theme "language": { "sProcessing": "处理中...", "sLengthMenu": "每页显示 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项，共 0 项", "sInfoFiltered": "(由 _MAX_ 项过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "正在拼命加载...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" }, "deferRender": true }, "bRetrieve": "true", "responsive": "true", "paging": "true", "bServerSide": true, //:服务端处理分页后数据,客户端呈现,此时为true.但此时aoColumns要变,将'sName'换成mDataProp,同时自定义列也要有对应的数据 "sServerMethod": "GET",//老版本提交方式 "sAjaxSource": "/Home/GetNesList", //ajax Url地址 //"ajax": { // "url": "/Home/GetNesList", // "type": "POST" //}, "bProcessing": true, "bPaginate": true, "sPaginationType": "full_numbers", 'bFilter': true,//关闭搜索 'bsearch': true, "aLengthMenu": [6, 8, 10, 20, 50], "iDisplayLength": 8, "iDisplayStart": 0, 'bAutoWidth': true, "aoColumns": [ { "data": "Id" }, { "data": "Title" }, { "data": "NewsContent" }, { "data": "DCount" }, { "data": "Status" }, { "data": null }, ], "aoColumnDefs": [ { "targets": [4], "searchable": false, "render": function (data, type, row) { if (data == 0) return '禁用'; else return '可用'; } }, { sDefaultContent: '', aTargets: ['_all'] } ] }); ////表格行点击设置选中样式 $("#archivestable tbody").on("click", "tr", function () { var $curr = $(this); if ($curr.hasClass("selected")) { $curr.removeClass("selected"); } else { table.$("tr.selected").removeClass("selected"); $curr.addClass("selected"); } }); }); </script> </body> </html>
/// <summary> ///分页类处理 /// </summary> public class DataTableParameter { /// <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; } }
/// <summary> /// 临时新闻类 /// </summary> public class News { public int Id { get; set; } public string Title { get; set; } public string NewsContent { get; set; } public int DCount { get; set; } public int Status { get; set; } }
无连接数据库，通过for循环生成list数据集合，大小可以自己稍微调整
/// <summary> /// 生成数据源 /// </summary> /// <returns></returns> public List<News> Getlist() { List<News> myLsit = new List<News>(); for (int i = 0; i < 300; i++) { if (i % 2 == 0) { myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 0 }); } else { myLsit.Add(new News { Id = i, Title = "ceshi", NewsContent = "哈哈" + i, DCount = 20, Status = 1 }); } } return myLsit; }
最后是控制器
[HttpGet] public JsonResult GetNesList(DataTableParameter tp) { #region //1 获取数据源 List<News> DataSource = Getlist(); //DataSource = DataSource.OrderByDescending(a => a.SubTime).ToList(); //2 处理页数 string echo = tp.sEcho; //用于客户端自己的校验 int dataStart = tp.iDisplayStart;//开始页数 int pageSize = tp.iDisplayLength == -1 ? DataSource.Count : tp.iDisplayLength;//总页数 string search = tp.sSearch; //3 是否有搜索框条件，【因为版本问题，暂时没有实现】 if (!String.IsNullOrEmpty(search)) { var data = DataSource.Where(a => a.Title.Contains(search) || a.NewsContent.Contains(search)) .Skip<News>(dataStart) .Take(pageSize) .ToList(); return Json(new { sEcho = echo, iTotalRecords = DataSource.Count(), iTotalDisplayRecords = DataSource.Count(), aaData = data }, JsonRequestBehavior.AllowGet); } else { var data = DataSource.Skip<News>(dataStart) .Take(pageSize) .ToList(); return Json(new { sEcho = echo, iTotalRecords = DataSource.Count(), iTotalDisplayRecords = DataSource.Count(), aaData = data }, JsonRequestBehavior.AllowGet); } #endregion }
第一次写，如果有不明白的程序们，可以联系我：qq935299029,注明：博客园