DataTables 配置和使用
WEB后台开发,如果用的是Bootstrap框架,那这个表格神器你一定不要错过。
What?英文不好,没关系咱有中文的 http://datatables.club/
不过我还是建议看英文的,因为比较全面虽然访问的速度慢点,终归能进的去。闲话不过说,先来个小例子吧。
1.先引用一下脚本地址,最好版本是一致的
<link rel="stylesheet" href="dataTables.bootstrap.min.css"> <script src="jquery.dataTables.min.js"></script> <script src="dataTables.bootstrap.min.js"></script>
2.配置一下本地化
"oLanguage": { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。", "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页", "sJump": "跳转" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } },
写到这里要说一句,上边这段本地化配置,有没有发现它的命名挺奇怪的,前边都有一个小写的o、s之类的,但是现在官网并不这样命名了,当然这并不影响我们使用它,下边是比较新的配置参数。
language: { "decimal": "", "emptyTable": "No data available in table", "info": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。", "infoEmpty": "当前显示第 0 至 0 项,共 0 项", "infoFiltered": "(由 _MAX_ 项结果过滤)", "infoPostFix": "", "thousands": ",", "lengthMenu": "每页 _MENU_ 项", "loadingRecords": "载入中...", "processing": "处理中...", "search": "搜索:", "zeroRecords": "没有匹配结果", "paginate": { "first": "首页", "previous": "上页", "next": "下页", "last": "末页" }, "aria": { "sortAscending": ": 以升序排列此列", "sortDescending": ": 以降序排列此列" } }
如果从开发角度来讲的话,每次都初始化这个配置,挺麻烦的,所以我们可以封装成文件,下个页面引用一下就可以了,接下来创建一个名字为 dataTables.defaults.js 的文件代码如下
$.extend($.fn.dataTable.defaults, { language: { "decimal": "", "emptyTable": "No data available in table", "info": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。", "infoEmpty": "当前显示第 0 至 0 项,共 0 项", "infoFiltered": "(由 _MAX_ 项结果过滤)", "infoPostFix": "", "thousands": ",", "lengthMenu": "每页 _MENU_ 项", "loadingRecords": "载入中...", "processing": "处理中...", "search": "搜索:", "zeroRecords": "没有匹配结果", "paginate": { "first": "首页", "previous": "上页", "next": "下页", "last": "末页" }, "aria": { "sortAscending": ": 以升序排列此列", "sortDescending": ": 以降序排列此列" } } });
我现在我们的语言本地化配置就算结束了,如果单独的文件一定别忘记引用!!
3.下面我们看下别的配置
- 页面代码很简单
<table id="table" class="table table-condensed table-hover">
</table>
- 基础配置
var table = $("#table").DataTable({ lengthMenu: [[20, 40, 60, -1], [20, 40, 60, "All"]], sort: false, pageLength: 20, pagingType: "full_numbers", paging: true, searching: false, //屏蔽datatales的查询框 dom: 'rt<"row"<"col-md-4" i><"col-md-8"p>>', processing: true, serverSide: true, columns: [ { title: "编号", data: "Uid", visible: true }, { title: "账号", data: "Account" }, { title: "密码", data: "PassWord" }, { title: "状态", data: "StatusName" }, { title: "时间", data: "CreateTime" }, ], ajax: { url: '/User/GetUserList', type: 'POST' } });
其他配置就不说了,就只说说dom吧,这个配置项是操作 搜索、数据信息、按钮、每页显示多少条这几个选项的的位置
- l - Length changing 改变每页显示多少条数据的控件
- f - Filtering input 即时搜索框控件
- t - The Table 表格本身
- i - Information 表格相关信息控件
- p - Pagination 分页控件
- r - pRocessing 加载等待显示信息
- < > - div elements 代表一个div元素
<div><div>
- <"#id" > - div with an id 指定了id的div元素
<div id='id'><div>
- <"class" > - div with a class 指定了样式名的div元素
<div class='class'><div>
- <"#id.class" > - div with an id and class 指定了id和样式的div元素
<div id='id' class='class'><div>
要显示什么元素,显示在什么位置自己安排就好了,我比较习惯上边的筛选项自己定义,所以表格上的信息就被我隐藏掉了.
下面展示一下后端的代码,比较简单没有做什么抽象之类的
public ActionResult GetUserList() { UserInfo query = new UserInfo { PageStart = Convert.ToInt32(Request.Form.Get("start")), PageEnd = Convert.ToInt32(Request.Form.Get("length")) }; var data = userInfoService.FindUserInfoList(query).ToList(); int count = userInfoService.FindUserInfoListCount(query); DataTableModel<UserInfo> model = new DataTableModel<UserInfo>() { draw = Convert.ToInt32(Request.Form.Get("draw")), recordsTotal = count, recordsFiltered = count, data = data, error = string.Empty }; var iso = new Newtonsoft.Json.Converters.IsoDateTimeConverter(); iso.DateTimeFormat = "yyyy-MM-dd HH:mm:ss"; object obj = new object(); return Content(Newtonsoft.Json.JsonConvert.SerializeObject(model, iso)); }
这里还要说下注意的地方,
Request.Form.Get("draw") 请求次数计数器,每次发送给服务器后又原封返回,不用做什么处理,切记一定要返回,不然错哪你都不知道。 Request.Form.Get("start") 第一条数据的起始位置,从0开始, 页码*页数=start 如果你用的是mysql数据库,就方便了 limit start,length 就可以了 Request.Form.Get("length") 每页显示的条数
dataTables 接受的参数必须按照下面这样,它才会认识
{ "draw": 2, "recordsTotal": 24, "recordsFiltered": 24, "data": [ { "Uid": 1, "Account": "aaaaaa@hotmail.com", "PassWord": "123456", }, { "Uid":2, "Account": "bbbbb@hotmail.com", "PassWord": "456123", } ], "error": "" }
这样绑定就成功了,其他的参数有不太明白的可以自行百度,或者去官网看一看。
DataTables 配置和使用的更多相关文章
- datatables配置及数据传输
var merchant_url = "index.php?op=merchant"; var table_merchant_setting ={ "ajax" ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析
一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...
- datatables参数配置详解
//@translator codepiano //@blog codepiano //@email codepiano.li@gmail.com //尝试着翻译了一下,难免有错误的地方,欢迎发邮件告 ...
- jquery.dataTables的探索之路-服务端分页配置
最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...
- datatables中的Options总结(3)
datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...
- datatables中的Options总结(2)
datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...
- JQuery插件之Jquery.datatables.js用法及api
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...
- jquery.datatables中文使用说明
http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方 ...
随机推荐
- rest简单实例
http://www.cnblogs.com/fredric/archive/2012/03/03/2378680.html http://www.thinksaas.cn/topics/0/153/ ...
- 武汉科技大学ACM:1007: 陶陶摘苹果
Problem Description 厘米高的板凳,当她不能直接用手摘到苹果的时候,就会踩到板凳上再试试. 个苹果到地面的高度,以及陶陶把手伸直的时候能够达到的最大高度,请帮陶陶算一下她能够摘到的苹 ...
- Linux中的搜索命令
find find是最常见和最强大的查找命令,在磁盘中查找文件,用它找到任何你想找的文件,就是速度有点慢. find path -option [ -print ] [ ...
- 史上最全的css hack
<!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #t ...
- windows编辑文本和unix编辑文本的回车符问题
我们的开发环境一般都使用windows操作系统,而测试环境和线上环境一般使用linux.windows下编辑的shell脚本,上传到windows下会发生错误.出现两种情况: 1.BOM头问题,前面有 ...
- MySQL和MsSQL实时自动同步---SyncNavigator 数据库同步软件
需要MySQL数据库支持的狐友们有福了,MySQL和MsSQL实时自动同步---SyncNavigator 数据库同步软件 使用SyncNavigator轻松实现数据库异地同步.断点续传.异构同步 ...
- django初探
如果是自己建站耍的话,还是用Php方便,毕竟Php服务器便宜又到处都是. 但是python毕竟是一个新鲜的东西,特别是django,以前一直东python的语法,而且是我最早学习的语言之一,但是一直停 ...
- Oracle 存储过程介绍
存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...
- DBUtils框架
一.O-R Mapping 简介 一]概念:可以理解为对象和数据库的映射. 二]常用O-R Mapping映射工具 1)Hibernate(全自动框架) 2)l ...
- Entity Framework with MySQL 学习笔记一(查看EF和SQL请求日志)
做数据库的一向来都会很注意请求的次数还有语句.这关系到很多性能的问题. 因此在使用EF的时候如果不了解原理很可能会搞出很糟糕的请求. 所以呢,在还没有搞懂EF前最基本的是你得"看得见&quo ...