首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 22, 2016

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

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

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

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

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>
 <!--引入脚本解决兼容性(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 - 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插件DataTable使用方法详解(.Net平台)

- Author -

童小鱼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
JavaScript字符串对象charAt方法入门实例（用于取得指定位置的字符）
Oct 17 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
javascript编写简易计算器
May 06 Javascript
javascript流程控制语句集合
Sep 18 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
CocosCreator入门教程之网络通信
Apr 16 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 #Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 #Javascript
Bootstrap popover用法详解
Dec 22 #Javascript
深入学习jQuery中的data()
Dec 22 #Javascript
读Javascript高性能编程重点笔记
Dec 21 #Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 #Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 #Javascript
limit(1) MYSQL函数(1) 计时器(1) 定时任务(2) turtle(1) 信号库(1) mysql.user(1) Mysql报错(1) blinker(1) 绘图(1)
You might like
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php封装的smarty类完整实例
2016/10/19 PHP
用于table内容排序
2006/07/21 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
python 远程统计文件代码分享
2015/05/14 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
python中必要的名词解释
2019/11/20 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python语言中有算法吗
2020/06/16 Python
详解python中的lambda与sorted函数
2020/09/04 Python
python热力图实现简单方法
2021/01/29 Python
大学新生军训个人的自我评价
2013/10/03 职场文书
面料业务员岗位职责
2013/12/26 职场文书
药品采购员岗位职责
2014/02/08 职场文书
师范生自荐信模板
2014/05/28 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
党员创先争优心得体会
2014/09/11 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
初中思想品德教学反思
2016/02/24 职场文书