jQuery插件DataTable使用方法详解(.Net平台)

时间：2021-05-26

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

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

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

js:jq+jquery.dataTables.min.js

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

前端代码：

<!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>  </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 - 1)*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序列化后，返回给前端，即可。

效果图：

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

jQuery插件DataTable使用方法详解(.Net平台)

相关文章

jQuery版仿Path菜单效果

jquery 键盘事件的使用方法详解

jQuery中.live()方法的用法深入解析

使用jquery datatable和bootsrap创建表格实例代码

一句jQuery代码实现返回顶部效果（简单实用）