最后一篇文章提到了MvcPager。最近用了一个前端JQ插件——DataTable(简称DT)，非常好用。

DT是前端插件，与后端完全分离。从这个角度来说，我特别喜欢。

1.使用DT需要以下支持

js : jq jquery . DataTables . min . js

第二，在页面上引入js，直接使用DT函数

前端代码：

！DOCTYPE htmlhtmlhead元字符集='utf-8 '元http-equiv=' X-UA-兼容'内容=' IE=边，chrome=1 '元名称=“视口”内容='宽度=设备宽度，初始比例=1,最小比例=1.0,最大比例=1.0,用户可缩放=无/title用户列表/title link href=' ~/Content/Scripts/H-ui/CSS/H-ui。量滴CSS ' rel='样式表/link href=' ~/Content/Scripts/H-ui。管理/CSS/H-ui。管理员。CSS ' rel='样式表/link href=' ~/Content/Scripts/Hui-icon font/1。0 .8/图标字体。CSS ' rel='样式表/风格.页面容器{ padding: 10px }。操作{ background : # efeef 0 padd : 3px }。搜索{ background : # efeef 0 padd : 5px边距-top : 5px；} .表格{ margin-top : 10px；} .dataTables _ info { margin-left : 5px；} # table 1 _ info { padd : 0；} # table 1 _ length { margin-left : 15px；} /style！-引入脚本解决兼容性（黑客技术，必须放入头中) - !-[如果lt IE 9]脚本src=' http : ~/Content/Scripts/html 5 _ css3/html 5 shiv。量滴js /脚本脚本src=' http : ~/Content/Scripts/html 5 _ css3/response。量滴js /脚本脚本src=' http : ~/Content/Scripts/PIE-2.0 beta 1/PIE _ ie 678。js /脚本！[endif]-/head body div class=' page-container ' div class=' operation ' a class=' BTN BTN-危险半径' href=' JavaScript :'一、class='Hui-iconfont'/i批量删除/a class=' BTN BTN-主半径'一、class='Hui-iconfont'/i添加用户/a/div class=' search '输入类型='text' id='昵称class=' input-text ' style=' width :100 px；'占位符='昵称按钮id=' search ' class=' BTN BTN-success ' type=' submit ' I class='hui-iconfont'/i查询/button/div class=' table ' table id=' table 1 ' class=' table table-边框表格-边框表格-bg表格-悬停and tr class=' text-c ' thin put type=' checkbox ' name=' value=' '/th昵称/th账号/th密码/th添加时间/th修改时间/th是否禁用/th操作/th/tr/thead/table/div/div/body/html脚本src=' http : ~/Content/Scripts/jquery-2。0 .3 .量滴js '/script script src=' http : ~/Content/Scripts/datatables/1。10 .13/jquery。数据表。量滴js '/脚本脚本src=' http : ~/Content/Scripts/H-ui/js/H-ui。js '/script script $(function(){ table 1=initializeTable()；$('#search ').click(function(){ table 1。Ajax。重载()；});});函数initializeTable() {//初始化表var table=$('#table1 ').DataTable({/* * * * * * * * * * * * * * * * * * * * * * * * * * * * *表格数据加载* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */"服务器端“:真”、“Ajax”: {//Ajax请求数据源网址' : '/用户信息/管理器/搜索'，'类型' : '帖子'，'数据' :函数（数据){//添加额外的数据给服务器数据。页面索引=(数据。开始/数据。长度)1；数据。昵称=$(' #昵称')。val().trim()；} }，“列”:[//列绑定{ 'defaultContent': '' }，{ 'data': 'Nickname' }，{ 'data': 'LoginName' }，{ 'data': 'LoginPassword' }，{ 'data': 'AddTime' }，{ 'data': 'ModifyTime' }，{ ' data ' : ' isofficerden ' }，{ 'defaultContent': '' }，' columndefytime列定义{ 'targets': [0]，' data': 'UserInfoId '，' render':函数（数据，类型，完整){//全部列值可以通过满了。列名获取，一般单个列值用数据PS:这里的提出是有多少列就执行多少次方法。不知道为啥返回"输入类型="复选框"值="数据"名称="用户信息标识";} }，{ 'targets': [4]，' data': 'AddTime '，' render':函数（数据，类型，完整){//全部列值可以通过满了。列名获取，一般单个列值用数据PS:这里的提出是有多少列就执行多少次方法。

不知道为啥if(数据==null | |数据。trim()==' '){ return " "；} else { var Date=new Date(parsent(数据。切片(6)))；返回日期。getfull year()“/”日期。getmonth()“/”日期。getdate()；} } }，{ 'targets': [5]，' data': 'ModifyTime '，' render':函数（数据，类型，完整){//全部列值可以通过满了。列名获取，一般单个列值用数据PS:这里的提出是有多少列就执行多少次方法。不知道为啥if(数据==null | |数据。trim()==' '){ return/'；} else { var Date=new Date(parsent(数据。切片(6)))；返回日期。getfull year()“/”日期。getmonth()“/”日期。getdate()；} } }，{ 'targets': [6]，' data ' :山梨醇，“渲染”:函数（数据，类型，完整){//全部列值可以通过满了。列名获取，一般单个列值用数据PS:这里的提出是有多少列就执行多少次方法。不知道为啥如果(数据){ return '是；} else { return '否；} } }，{ 'targets': [7]，' data': 'UserInfoId '，' render':函数（数据，类型，完整){//全部列值可以通过满了。列名获取，一般单个列值用数据PS:这里的提出是有多少列就执行多少次方法。不知道为啥return ' a style=' text-decoration : none ' class=' ml-5f-14 ' onclick=article _ edit('资讯编辑、‘article-add.html’、‘数据’”)href=‘JavaScript :标题='编辑I class='hui-iconfont'/i/a' ' a style=' text-decoration : none ' class=' ml-5 f-14 ' onclick=article _ del(this，' ' data ' ')href=' JavaScript :标题='删除一、class='hui-iconfont'/i/a'；} },{"可订购“:假，”目标": [0,7] },//是否排序//{"可见“:假，”目标": [3,5] }//是否可见】、“行回调”:函数（行、数据、显示索引){//行定义$(行)。attr('class '，' text-c ')；}，' initComplete':函数（设置，json) { //表格初始化完成后调用}, /****************************************表格数据加载****************************************************//****************************************表格样式控制* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * DOM ' : ' t ' datatables _ info ' ILP '，//表格布局语言' : {//语言国际化长度菜单' : '每页_MENU_条，'零记录' : '没有找到记录，"信息":当前显示_START_到_END_条，共_合计_条，' infoEmpty': '无记录，' paginate': { 'first': '首页，'先前' : '前一页，'下一个':后一页，'最后':末页} }，“Pagingtype”:“full _ numbers”，//分页格式处理： true，//等待加载效果ordering ' : false，//排序功能/****************************************表格样式控制****************************************************/});返回表；}/脚本后端代码：

/* * * * * * int page SiZe=dt . length；int page index=dt . page index；IQueryableModel。UserInfo userInfoIq=CurrentBullSession。UserInfoBll . getiqueryableysearchpage(page index，pageSize，out total，昵称)；ListModel。用户信息用户信息列表=用户信息智商。to list()；dt.recordsTotal=总计；dt.recordsFiltered=totaldt.data=userInfoList返回Json(dt)；}/* * * * * * * * * * * * * * * * bll服务代码* * * * * * * * * * * * * * * * * * * * * * * * public IQueryableUserInfo/getiquerybysearch out int total，string nickname){ IQueryableUserInfo userinfo=CurrentDal。GetIQueryable()；if(！字符串。IsNullOrEmpty(昵称)){ userInfoIq=userInfoIq。其中(a=a .昵称. Contains(昵称))；} total=userInfoIq。count()；userInfoIq=userInfoIq。orderbydecoding(a=a . AddTiME)；userInfoIq=userInfoIq。跳过((页面索引-1)*页面大小)。take(PageSize)；//排序必须在分页前完成，否则ef会报错返回userInfoIq}使用系统；使用系统。收藏品；使用系统。集合。通用；使用系统。Linq使用系统。文字；命名空间view model {///Summary////jQuery Datatable插件交互的DT格式的数据(DT参数区分大小写)////Summary Public Class Datatable {///Summary////请求次数(前端=“后端”)//////Summary Public int draw { get；设置；} ///summary ///总记录(前端《==后端） /// /summary public int recordsTotal { get; set; } /// summary /// 过滤后的总记录数（前端《==后端） /// /summary public int recordsFiltered { get; set; } /// summary /// 记录开始索引（前端==》后端)////summary public int start { get；设置；}///summary////page index(前端=="后端)////summary public int page index { get；设置；} ///summary ///PageSize(前端=="后端)////summary public int length { get；设置；} ///汇总////收集分页数据(前端==后端)////汇总公共IList数据{ get设置；}}}就是这样。是不是很简单(~ ~()~)

(_)好，我来解释一下。

前台：

首先，我们的表格只给出了车身部分，但是车身部分呢？交给DT完成，由DT控制。那么我们先初始化DT，js会调用initializeTable()方法，其中$('#table1 ')。调用DataTable({各种配置})。要配置DT。至于这些配置的功能，我已经在代码里做了注释，详细说明了配置，可以查看官网的文档。

配置中最重要的一项是ajax配置项，它是数据源的配置项。数据源有很多种。我在这里选择了ajax异步请求数据源。

Url ' : '/user info/manager/search '这是用DT请求数据配置的URL地址

类型‘:‘post’表示请求是通过post发送的

数据' :

函数(数据){//向服务器数据添加额外的数据。data .昵称=$(' #昵称')。val()。trim()；}因为我使用了搜索功能，所以每次请求数据时，我都必须将搜索条件作为附加数据发送到服务器

最后注意添加‘server side’: true，因为我们的数据来自后台，而不是前台的静态数据，所以打开“服务器模式”，这样每次操作表的时候，都会变成一个请求一次又一次的发送到服务器。

背景：

后台负责提供数据源，并使用自定义数据表类作为格式化数据进行交互。当然，这里的DataTable类不是必需的。你只需要满足前后数据交互的格式。为了方便起见，这里将其打包为一个类。

DT建议我们交互的数据格式至少应该包含以下几项，我用匿名类来表示(区分大小写):

新增{draw=* * *，records total=* * *，records filtered=* * *，data=* * *，}对于其他项目，可以根据自己的实际情况进行添加。

准备好数据后，序列化数据Json并将其返回到前端。

渲染：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。