首页
所有分类
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 相关文章推荐
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 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
检举信(8) 标语(336) 任命书(51) 口号(179) 报告(147) 协议书(568) 说明书(38) 公证书(45) 工作总结(1972) 党团范文(807)
You might like
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Selenium的使用详解
2018/10/19 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
Strathberry苏贝瑞中国官网：西班牙高级工匠手工打造
2020/10/19 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
运动会400米加油稿（8篇）
2014/09/22 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
喜迎建国70周年：有关爱国的名言名句
2019/09/24 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js