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）-微信公众平台开发-功能概述
系列目录 为什么要先发这个文章? 因为接下来的文章是关于微信开发的系列,心中一定要有一个概念,知道自己接下来要做什么功能. 而且微信到处都是坑,我首先要把微信与本地跑通起来才敢发布,否则中间出现坑导致 ...
随机推荐
- git &github 快速入门
本节内容 github介绍 安装 仓库创建& 提交代码 代码回滚 工作区和暂存区 撤销修改 删除操作 远程仓库 分支管理 多人协作 github使用 忽略特殊文件.gitignore 1.gi ...
- 《Ansible权威指南》笔记（2）——Inventory配置
四.Inventory配置ansible通过Inventory来定义主机和组,使用时通过-i指定读取,默认/etc/ansible/hosts.可以存在多个Inventory,支持动态生成.1.定义主 ...
- Xamarin.Android之ContentProvider
一.前言 掌握了如何使用SQLiteOpenHelper之后,我们就可以进行下一步的学习.本章我们将会学习如何使用ContentProvider来将数据库方面的操作封装起来,同时它还可以供其他应用访问 ...
- EQueue文件持久化消息关键点设计思路
要持久化的关键数据有三种 消息: 队列,队列中存放的是消息索引信息,即消息在文件中的物理位置(messageOffset)和在队列中的逻辑位置(queueOffset)的映射信息: 队列消费进度,表示 ...
- 复化梯形求积分——用Python进行数值计算
用程序来求积分的方法有很多,这篇文章主要是有关牛顿-科特斯公式. 学过插值算法的同学最容易想到的就是用插值函数代替被积分函数来求积分,但实际上在大部分场景下这是行不通的. 插值函数一般是一个不超过n次 ...
- Java——搭建自己的RESTful API服务器（SpringBoot、Groovy）
这又是一篇JavaWeb相关的博客,内容涉及: SpringBoot:微框架,提供快速构建服务的功能 SpringMVC:Struts的替代者 MyBatis:数据库操作库 Groovy:能与Java ...
- python __globals__, __file__
Attribute Meaning __doc__ The function's documentationstring, or None ifunavailable; not inherited ...
- 【Win 10 应用开发】Sqlite 数据库的简单用法
如果老周没记错的话,园子里曾经有朋友写过如何在 UWP 项目中使用 Sqlite数据库的文章.目前我们都是使用第三方封装的库,将来,SDK会加入对 Sqlite 的支持. 尽管目前 UWP-RT 库中 ...
- 快速开发框架CRL3.0发布,附带最新的项目示例CRLShoppingDemo
继上次使用CRL实现大数据分库分表方案升级到2.4,时隔不久又升级到了大版本号3.0,主要是因为结构发生了一些更改 ORM和业务封装Package分开了,增加了实例项目演示代码CRLShoppingD ...
- Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角，渐变实现)
Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...