首页
所有分类
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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 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
标语(336) 口号(179) 检举信(8) 说明书(38) 协议书(568) 汇报材料(247) 党团范文(807) 任命书(51) 工作总结(1972) 报告(147)
You might like
php 无限级 SelectTree 类
2009/05/19 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
javascript 数组排序函数
2009/08/20 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
ComboBox（下拉列表框）通过url加载调用远程数据的方法
2017/08/06 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python对象及面向对象技术详解
2016/07/19 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python实现海螺图片的方法示例
2019/05/12 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
英国最受欢迎的母婴精品品牌：JoJo Maman BéBé
2021/02/17 全球购物
战友聚会邀请函
2014/01/18 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
端午节活动总结
2014/08/26 职场文书
投资意向协议书
2015/01/29 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL