上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable（简称DT），很好用。
DT是一款前端插件，和后端完全分离开，就这点来看，我就特别喜欢。
一.使用DT，需要以下支持
js:jq+jquery.dataTables.min.js
二、页面上进行引入js，直接使用DT功能
前端代码：
用户列表 .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; } 批量删除 添加用户
昵称 账号 密码 添加时间 修改时间 是否禁用 操作
后端代码:
public ActionResult Search(DataTable dt,string nickname)
{
int total;
int pageSize = dt.length;
int pageIndex = dt.pageIndex;
IQueryable userInfoIq=CurrentBllSession.UserInfoBll.GetIQueryableBySearchPage(pageIndex,pageSize,out total,nickname);
List userInfoList = userInfoIq.ToList();
dt.recordsTotal = total;
dt.recordsFiltered = total ;
dt.data = userInfoList;
return Json(dt);
}
public IQueryable GetIQueryableBySearchPage(int pageIndex,int pageSize,out int total,string nickname)
{
IQueryable 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 - 1)*pageSize).Take(pageSize);//分页前必须排序，不然EF报错
return userInfoIq;
}
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ViewModel
{
///
/// JqueryDataTable插件交互的DT格式的数据(DT参数区分大小写)
///
public class DataTable
{
///
/// 请求次数（前端==》后端）
///
public int draw { get; set; }
///
/// 总记录数（前端《==后端）
///
public int recordsTotal { get; set; }
///
/// 过滤后的总记录数（前端《==后端）
///
public int recordsFiltered { get; set; }
///
/// 记录开始索引（前端==》后端）
///
public int start { get; set; }
///
/// PageIndex（前端==》后端）
///
public int pageIndex { get; set; }
///
/// PageSize（前端==》后端）
///
public int length { get; set; }
///
/// 集合分页数据（前端《==后端）
///
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序列化后，返回给前端，即可。
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
