JqueryDataTable的使用(.Net平台)

上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable（简称DT），很好用。

DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。

一.使用DT，需要以下支持

js:jq+jquery.dataTables.min.js

二、页面上进行引入js，直接使用DT功能

前端代码：

 @{

     Layout = null;

 }

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

     <title>用户列表</title>

     <link href="~/Content/Scripts/h-ui/css/H-ui.min.css" rel="stylesheet" />

     <link href="~/Content/Scripts/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" />

     <link href="~/Content/Scripts/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" />

     <style>

         .page-container {

             padding: 10px;

         }

         .operation {

             background: #EFEEF0;

             padding: 3px;

         }

         .search {

             background: #EFEEF0;

             padding: 5px;

             margin-top: 5px;

         }

         .table {

             margin-top: 10px;

         }

         .dataTables_info {

             margin-left: 5px;

         }

         #table1_info {

             padding: 0;

         }

         #table1_length {

             margin-left: 15px;

         }

     </style>

     <!--引入脚本解决兼容性(hack技术，必须放入head中)-->

     <!--[if lt IE 9]>

     <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>

     <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>

     <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>

     <![endif]-->

 </head>

 <body>

     <div class="page-container">

         <div class="operation">

             <a class="btn btn-danger radius" href="javascript:;"><i class="Hui-iconfont"></i> 批量删除</a>

             <a class="btn btn-primary radius" href="javascript:;"><i class="Hui-iconfont"></i> 添加用户</a>

         </div>

         <div class="search">

             <input type="text" id="nickname" class="input-text" style="width:100px;" placeholder="昵称">

             <button id="search" class="btn btn-success" type="submit"><i class="Hui-iconfont"></i> 查询</button>

         </div>

         <div class="table">

             <table id="table1" class="table table-border table-bordered table-bg table-hover">

                 <thead>

                     <tr class="text-c">

                         <th><input type="checkbox" name="" value=""></th>

                         <th>昵称</th>

                         <th>账号</th>

                         <th>密码</th>

                         <th>添加时间</th>

                         <th>修改时间</th>

                         <th>是否禁用</th>

                         <th>操作</th>

                     </tr>

                 </thead>

             </table>

         </div>

     </div>

 </body>

 </html>

 <script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>

 <script src="~/Content/Scripts/datatables/1.10.13/jquery.dataTables.min.js"></script>

 <script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>

 <script src="~/Content/Scripts/h-ui.admin/js/H-ui.admin.js"></script>

 <script type="text/javascript">

     var table1 = null;

     $(function() {

         table1=initializeTable();

         $("#search").click(function() {

             table1.ajax.reload();

         });

     });

     function initializeTable() {//初始化table

         var table = $("#table1").DataTable({

             /****************************************表格数据加载****************************************************/

             "serverSide": true,

             "ajax": {//ajax请求数据源

                 "url": "/UserInfo/Manager/Search",

                 "type": "post",

                 "data": function (data) {//添加额外的数据给服务器

                     data.pageIndex = (data.start / data.length) + 1;

                     data.nickname = $("#nickname").val().trim();

                 }

             },

             "columns": [//列绑定

                 { "defaultContent": "" },

                 { "data": "Nickname" },

                 { "data": "LoginName" },

                 { "data": "LoginPassword" },

                 { "data": "AddTime" },

                 { "data": "ModifyTime" },

                 { "data": "IsForbidden" },

                 { "defaultContent": "" }

             ],

             "columnDefs": [//列定义

                 {

                     "targets": [0],

                     "data": "UserInfoId",

                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥

                         return "<input type='checkbox' value='" + data + "' name='UserInfoId'>";

                     }

                 },

                 {

                     "targets": [4],

                     "data": "AddTime",

                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥

                         if (data == null || data.trim() == "") { return ""; }

                         else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }

                     }

                 },

                 {

                     "targets": [5],

                     "data": "ModifyTime",

                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥

                         if (data == null || data.trim() == "") { return "/"; }

                         else { var date = new Date(parseInt(data.slice(6))); return date.getFullYear() + "/" + date.getMonth() + "/" + date.getDate(); }

                     }

                 },

                 {

                     "targets": [6],

                     "data": "IsForbidden",

                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥

                         if (data) { return "是"; }

                         else { return "否"; }

                     }

                 },

                 {

                     "targets": [7],

                     "data": "UserInfoId",

                     "render": function (data, type, full) {//全部列值可以通过full.列名获取,一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥

                         return "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'><i class='Hui-iconfont'></i></a>" +

                             "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'><i class='Hui-iconfont'></i></a>";

                     }

                 },

                 { "orderable": false, "targets": [0, 7] },// 是否排序

                 //{ "visible": false, "targets": [3, 5] }//是否可见

             ],

             "rowCallback": function (row, data, displayIndex) {//行定义

                 $(row).attr("class", "text-c");

             },

             "initComplete": function (settings, json) { //表格初始化完成后调用

             },

             /****************************************表格数据加载****************************************************/

             /****************************************表格样式控制****************************************************/

             "dom": "t<'dataTables_info'il>p",//表格布局

             "language": {//语言国际化

                 "lengthMenu": "每页 _MENU_ 条",

                 "zeroRecords": "没有找到记录",

                 "info": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_条",

                 "infoEmpty": "无记录",

                 "paginate":

                 {

                     "first": "首页",

                     "previous": "前一页",

                     "next": "后一页",

                     "last": "末页"

                 }

             },

             "pagingType": "full_numbers",//分页格式

             "processing": true,//等待加载效果

             "ordering": false,//排序功能

             /****************************************表格样式控制****************************************************/

         });

         return table;

     }

 </script>

后端代码:

 /****************Controller后台代码******************/

 public ActionResult Search(DataTable dt,string nickname)

         {

             int total;

             int pageSize = dt.length;

             int pageIndex = dt.pageIndex;

             IQueryable<Model.UserInfo> userInfoIq=CurrentBllSession.UserInfoBll.GetIQueryableBySearchPage(pageIndex,pageSize,out total,nickname);

             List<Model.UserInfo> userInfoList = userInfoIq.ToList();

             dt.recordsTotal = total;

             dt.recordsFiltered = total ;

             dt.data = userInfoList;

             return Json(dt);

         }

 /**************************Bll服务代码************************/

  public IQueryable<UserInfo> GetIQueryableBySearchPage(int pageIndex,int pageSize,out int total,string nickname)

         {

             IQueryable<UserInfo> userInfoIq= CurrentDal.GetIQueryable();

             if (!string.IsNullOrEmpty(nickname))

             {

                 userInfoIq=userInfoIq.Where(a => a.Nickname.Contains(nickname));

             }

             total=userInfoIq.Count();

             userInfoIq=userInfoIq.OrderByDescending(a => a.AddTime);

             userInfoIq=userInfoIq.Skip((pageIndex - )*pageSize).Take(pageSize);//分页前必须排序，不然EF报错

             return userInfoIq;

         }

 using System;

 using System.Collections;

 using System.Collections.Generic;

 using System.Linq;

 using System.Text;

 namespace ViewModel

 {

     /// <summary>

     /// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)

     /// </summary>

     public class DataTable

     {

         /// <summary>

         /// 请求次数（前端==》后端）

         /// </summary>

         public int draw { get; set; }

         /// <summary>

         /// 总记录数（前端《==后端）

         /// </summary>

         public int recordsTotal { get; set; }

         /// <summary>

         /// 过滤后的总记录数（前端《==后端）

         /// </summary>

         public int recordsFiltered { get; set; }

         /// <summary>

         /// 记录开始索引（前端==》后端）

         /// </summary>

         public int start { get; set; }

         /// <summary>

         /// PageIndex（前端==》后端）

         /// </summary>

         public int pageIndex { get; set; }

         /// <summary>

         /// PageSize（前端==》后端）

         /// </summary>

         public int length { get; set; }

         /// <summary>

         /// 集合分页数据（前端《==后端）

         /// </summary>

         public IList data { get; set; }

     }

 }

这样就搞定了。。。是不是很简单(●￣(ｴ)￣●)

╮(╯_╰)╭好的，我来解释下。

前台：

首先我们的table只是给出了thead部分，那么tbody部分呢？交给DT来完成，由DT来控制。那么我们先来初始化DT，js会调用initializeTable（）方法，方法里调用$("#table1").DataTable({各种配置}）；来配置DT。至于这些配置的作用，我代码里都做了注释，详细的配置解释，可以查看官网的文档。

配置里有一项很重要，就是ajax配置项，这里是数据源的配置项，数据源可以有多种，我这里选用了ajax异步请求数据源。

"url": "/UserInfo/Manager/Search"这个是配置了DT请求数据的url地址

"type": "post"指明了以post方式发送请求

"data": function (data) {//添加额外的数据给服务器
                    data.pageIndex = (data.start / data.length) + 1;
                    data.nickname = $("#nickname").val().trim();
                }这了由于我用到了搜索的功能，所以每次请求数据的时候，要把搜索的条件作为附加的数据传给服务器

最后，注意要加上"serverSide": true，因为我们的数据都是从后台过来的，不是前台的静态数据，要开启“服务器模式”，这样，你每次对表格的操作，都会变成一次次的请求发送给服务器。

后台：

后台负责提供数据源，使用自定义的DataTable类来作为格式化的数据进行交互。当然这里的DataTable类不是必须的，你只要满足前后数据交互的格式就可以，这里封装成一个类，是为了方便。

DT建议我们交互的数据格式，最起码要包含以下几项，我用匿名类来表示(区分大小写)：

new {

　　draw=***,

　　recordsTotal=***,

　　recordsFiltered=***,

　　data=***,

}

其他项的话，你可以根据自己的实际情况自行添加。

准备好了数据之后呢，把数据Json序列化后，返回给前端，即可。

效果图：

JqueryDataTable的使用(.Net平台)的更多相关文章

Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part3：db安装和升级
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级环境:OEL 5.7 + Oracle 10.2.0.5 RAC 5.安装Database软件 5. ...
Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part1：准备工作
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...
Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持
Jexus 是一款运行于 Linux 平台,以支持 ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...
Windows平台分布式架构实践 - 负载均衡
概述最近.NET的世界开始闹腾了,微软官方终于加入到了对.NET跨平台的支持,并且在不久的将来,我们在VS里面写的代码可能就可以通过Mono直接在Linux和Mac上运行.那么大家(开发者和企业)为 ...
标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件，交付率最高的技术型软件公司
一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...
我为Net狂 ~ 社交平台系列小集合！
微信平台: 我为Net狂(dotNetCrazy) 资源贴吧: http://tieba.baidu.com/f?kw=毒逆天个人博客: http://dunitian.cnblogs.com/ h ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（76）-微信公众平台开发-网页授权
前言网页授权是:应用或者网站请求你用你的微信帐号登录,同意之后第三方应用可以获取你的个人信息网上说了一大堆参数,实际很难理解和猜透,我们以实际的代码来演示比较通俗易懂配置实现之前我们必须配置用 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（70）-微信公众平台开发-成为开发者
系列目录前言: 一.阅读这段系列之前,你必须花半天时间大致阅读微信公众平台的API文档,我尽量以简短快速的语言与大家分享一个过程二.借助微信公众平台SDK Senparc.Weixin for C ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（69）-微信公众平台开发-功能概述
系列目录为什么要先发这个文章? 因为接下来的文章是关于微信开发的系列,心中一定要有一个概念,知道自己接下来要做什么功能. 而且微信到处都是坑,我首先要把微信与本地跑通起来才敢发布,否则中间出现坑导致 ...

随机推荐

docker4dotnet #1 – 前世今生 & 世界你好
作为一名.NET Developer,这几年看着docker的流行实在是有些眼馋.可惜的是,Docker是基于Linux环境的,眼瞧着那些 java, python, node.js, go 甚至连p ...
递归实现n（经典的8皇后问题）皇后的问题
问题描述:八皇后问题是一个以国际象棋为背景的问题:如何能够在8×8的国际象棋棋盘上放置八个皇后, 使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上 ...
PHP安装
工具 http://www.cnblogs.com/xiwang6428/p/4315049.html http://www.iteye.com/news/22672 1 安装:sudo apt-ge ...
.NET面试题系列[4] - C# 基础知识(2)
2 类型转换面试出现频率:主要考察装箱和拆箱.对于有笔试题的场合也可能会考一些基本的类型转换是否合法. 重要程度:10/10 CLR最重要的特性之一就是类型安全性.在运行时,CLR总是知道一个对象是 ...
NodeJS的代码调试和性能调优
本文转自我的个人博客. NodeJS 自 2009 年显露人间,到现在已经六个年头了,由于各种原因,中间派生出了个兄弟,叫做 iojs,最近兄弟继续合体,衍生出了 nodejs4.0 版本,这东西算是 ...
HTML5 <details> 标签
HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...
Rxjava cold/hot Observable
create Observable分为cold以及hot两种,cold主要是静态的,每次subscribe都是从头开始互不干扰,而hot的在同一时刻获得的值是一致的 cold Observable 使 ...
Lamda表达式多个字段排序问题 ThenBy、ThenByDescending
示例代码: //ThenBy - 在 OrderBy 或 OrderByDescending 的基础上再正序排序 //ThenByDescending - 在 OrderBy 或 OrderByDes ...
angular1
1.双向绑定: 可进可出 2.依赖注入函数有定义方定义 3.MVC M: Model 模型--数据 V: View 视图--表现层 C: Controller 控制器--业务逻辑 4.模板: {{ ...
Python标准模块--concurrent.futures
1 模块简介 concurrent.futures模块是在Python3.2中添加的.根据Python的官方文档,concurrent.futures模块提供给开发者一个执行异步调用的高级接口.con ...

JqueryDataTable的使用(.Net平台)

JqueryDataTable的使用(.Net平台)的更多相关文章

随机推荐

热门专题