ASP.NET MVC 使用dataTable(3)--更多选项参考
ASP.NET MVC 使用dataTable(3)--更多选项参考
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='/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,
服务端代码:
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(new 18 //{ 19 // sEcho = 1, 20 // iTotalRecords = DataSource.Count, 21 // iTotalDisplayRecords = data.Count(), 22 // aaData = data 23 //}, JsonRequestBehavior.AllowGet); 24 #endregion 25 }
场景二:服务端处理分页后数据,客户端呈现,此时为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 => new 25 { 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.Status 33 }).ToList(); 34 35 //3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组:即里面是一个数组[["","",""],[],[],[]] 36 return Json(new 37 { 38 sEcho = echo, 39 iTotalRecords = DataSource.Count(), 40 iTotalDisplayRecords = DataSource.Count(), 41 aaData = data 42 }, JsonRequestBehavior.AllowGet); 43 } 44 else 45 { 46 var data = DataSource.Skip<Article>(dataStart) 47 .Take(pageSize) 48 .Select(a => new 49 { 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.Status 57 }).ToList(); 58 59 //3.0 构造datatable所需要的数据json对象...aaData里面应是一个二维数组:即里面是一个数组[["","",""],[],[],[]] 60 return Json(new 61 { 62 sEcho = echo, 63 iTotalRecords = DataSource.Count(), 64 iTotalDisplayRecords = DataSource.Count(), 65 aaData = data 66 }, JsonRequestBehavior.AllowGet); 67 } 68 #endregion 69 }
其中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 }
后台效果展示:
以上就是对datatable插件的使用说明。
转载于:https://www.cnblogs.com/liyanwei/p/10615623.html
ASP.NET MVC 使用dataTable(3)--更多选项参考相关推荐
- ASP.NET MVC 3 Razor 多国语言参考解决方案 补充四
ASP.NET MVC 3 Razor 多国语言参考解决方案 补充四 转自 http://www.cnblogs.com/think8848/archive/2011/07/05/2098464.ht ...
- 在ASP.NET MVC中实现Select多选
我们知道,在ASP.NET MVC中实现多选Select的话,使用Html.ListBoxFor或Html.ListBox方法就可以.在实际应用中,到底该如何设计View Model, 控制器如何接收 ...
- [翻译:ASP.NET MVC 教程]理解模型、视图和控制器
本篇教程为你提供了ASP.NET MVC的模型.视图和控制器的高级概述.换句话说,即本文向你解释了在ASP.NET MVC中"M"."V"和"C&qu ...
- 菜鸟程序员之Asp.net MVC Session过期异常的处理
菜鸟程序员之Asp.net MVC Session过期异常的处理 参考文章: (1)菜鸟程序员之Asp.net MVC Session过期异常的处理 (2)https://www.cnblogs.co ...
- 在Asp.net MVC使用jqGrid--代码少点再少点
本示例显示了如何动态生成前端jqGrid代码,一般情况仅一行代码: <%=Html.jqGrid<TestModel>(@"#jqT", "Test&q ...
- Asp.net MVC 3 Framework: SportsStore源码
自己开发的公众号,可以领取淘宝内部优惠券 由于项目的要求,开始抽时间看些asp.net mvc方面的资料,主要参考的书籍是Pro ASP.NET MVC 3 Framework(pdf下载) .跟着里 ...
- 在ASP.NET MVC中进行TDD开发
TDD介绍 TDD是一种开发方法,全称是Test-Driven development,中文是测试驱动开发.作者是Kent Beck.首先让我介绍一下三种常见的开发方式: 第一种:先Coding,然后 ...
- ASP.NET MVC ETag Cache等优化方法
背景 最近有一个项目是用SmartAdmin + Jquery + EasyUI 一个ASP.NET MVC5的项目,一直存在一个性能问题,加载速度比较慢,第一次加载需要(在没有cache的情况下)需 ...
- ASP.NET MVC和jQuery DataTable整合
本文包含代码示例说明如何jQuery插件开发者可以集成到ASP.NET MVC应用程序. 下载源代码- 87.4 KB Introduction The jQuery DataTables plug- ...
最新文章
- Mybatis 关键组件(注意各组件的最佳作用域)
- 安卓机高的地图要用浏览器打开_浏览器F12操作概述
- 简单谈谈js中的MVC
- 陈松松:三种方式教你打造一个行业内10万视频播放量
- LeetCode #1349. 参加考试的最大学生数 - 学到了:压缩状态动态规划、位运算、reduce()、str().count()
- 如果网站的 Cookie 特别多特别大,会发生什么情况?
- MyCat基于MySQL实现主从切换
- Vue - 图片放大镜(vue-piczoom)
- android 减小apk大小,Android Studio如何减小APK体积
- 云查毒:避免恶意程序入侵的正确姿势
- 【raft】学习六:etcd/raft 选举和选举优化
- 2007-08-12 BSP 概念解析【zozo】---转至Drew的主页
- python小波包分解_小波包获得某个节点信号的几个细节问题
- 宇视阿宇摄像机夜间效果好吗?画面可以看清楚吗?
- Android Studio安装过程中的常见问题
- js中substring()、substr() 、slice()的用法
- 特技摩托前线android安装_特技摩托前线修改中文版-特技摩托前线全摩托解锁版下载7.9.1安卓版-玩友游戏网...
- 刚子扯谈:一起聊聊微信这孙子
- 批处理bat修改文件后缀
- case计算机英语,CASE
热门文章
- centos8镜像_CentOS8服务器进阶(一)
- asp.Net下短信猫发送短信中的中文乱码解决
- RSA加密解密(附源码工程)
- rust睡觉按键没反应_扫描仪四个按键分别是
- 2008引导修复 鼠标键盘用不了_这5个提高键盘鼠标生产力的工具,后悔没早点发现!...
- python中不能使用下标运算的是_下列选项中,不能使用下标运算的是() (3.0分)_学小易找答案...
- 下面是一个python函数、哪个说法不正确_2017秋python语言程序设计(北京信息科技大学)答案...
- python爬电影_零基础Python爬虫实现(爬取最新电影排行)
- 华为设备离线什么意思_华为手机中的P、Mate、nova分别是什么意思?看完你全懂了...
- 文件被后台程序占用无法删除_群晖NAS教程第十五节:查询群晖NAS硬盘空间占用情况,解决删除文件空间不增加问题...