上一篇随笔提到了MvcPager,最近用到了一款前端JQ插件------DataTable(简称DT),很好用。
DT是一款前端插件,和后端完全分离开,就这点来看,我就特别喜欢。
一.使用DT,需要以下支持
js:jq+jquery.dataTables.min.js
二、页面上进行引入js,直接使用DT功能
前端代码:
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<
Meta charset="utf-8">
<
Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
用户列表
<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"> 查询
Box" name="" value="">
昵称 |
账号 |
密码 |
添加时间 |
修改时间 |
是否禁用 |
操作 |
<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 "";
}
},{
"targets": [4],"data": "AddTime",一般单个列值用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",一般单个列值用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",一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
if (data) { return "是"; }
else { return "否"; }
}
},{
"targets": [7],一般单个列值用data PS:这里的render是有多少列就执行多少次方法。。。不知道为啥
return "<a style='text-decoration:none' class='ml-5 f-14' onclick=article_edit('资讯编辑','article-add.html','" + data + "') href='javascript:;' title='编辑'>" +
"<a style='text-decoration:none' class='ml-5 f-14' onclick=article_del(this,'" + data + "') href='javascript:;' title='删除'>";
}
},{ "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;
}
后端代码:
<div class="jb51code">
<pre class="brush:csharp;">
/****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 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;
}
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":
添加额外的数据给服务器
data.pageIndex = (data.start / data.length) + 1;
data.nickname = $("#nickname").val().trim();
}
这了由于我用到了搜索的功能,所以每次请求数据的时候,要把搜索的条件作为附加的数据传给服务器
最后,注意要加上"serverSide": true,因为我们的数据都是从后台过来的,不是前台的静态数据,要开启“服务器模式”,这样,你每次对表格的操作,都会变成一次次的请求发送给服务器。
后台负责提供数据源,使用自定义的DataTable类来作为格式化的数据进行交互。当然这里的DataTable类不是必须的,你只要满足前后数据交互的格式就可以,这里封装成一个类,是为了方便。
DT建议我们交互的数据格式,最起码要包含以下几项,我用匿名类来表示(区分大小写):
draw=, recordsTotal=, recordsFiltered=, data=,}
其他项的话,你可以根据自己的实际情况自行添加。
准备好了数据之后呢,把数据Json序列化后,返回给前端,即可。
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。