首页
所有分类
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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
PHP 与 js的通信（via ajax,json）
Nov 16 Javascript
JavaScript 继承使用分析
May 12 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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
默认端口(3) lamp(1) URL重定向(3) 二级域名(1) 443(1) 跨域(4) 前后端分离(1) lnmp(1) SSL(3) 压力测试(1)
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php 引用(&amp;)详解
2009/11/20 PHP
PHP 函数学习简单小结
2010/07/08 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
表单提交错误后返回内容消失问题的解决方法（PHP网站）
2015/10/20 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
探讨：JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
React.js中常用的ES6写法总结（推荐）
2017/05/09 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python中round函数如何使用
2020/06/19 Python
python如何控制进程或者线程的个数
2020/10/16 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Perry Ellis官网：美国男士品味服装
2016/12/09 全球购物
Fairyseason：为个人和批发商提供女装和配件
2017/03/01 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
考试作弊检讨书1000字（5篇）
2014/10/19 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
Python如何用re模块实现简易tokenizer
2022/05/02 Python