WEB后台开发,如果用的是Bootstrap框架,那这个表格神器你一定不要错过。

官方地址:https://datatables.net/

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 配置和使用的更多相关文章

  1. datatables配置及数据传输

    var merchant_url = "index.php?op=merchant"; var table_merchant_setting ={ "ajax" ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  4. datatables参数配置详解

    //@translator codepiano //@blog codepiano //@email codepiano.li@gmail.com //尝试着翻译了一下,难免有错误的地方,欢迎发邮件告 ...

  5. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  6. datatables中的Options总结(3)

    datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...

  7. datatables中的Options总结(2)

    datatables中的Options总结(2) 五.datatable,列 columnDefs.targets 分配一个或多个列的列定义. columnDefs 设置列定义初始化属性. colum ...

  8. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  9. jquery.datatables中文使用说明

    http://www.cnblogs.com/taizhouxiaoba/archive/2009/03/17/1414426.html 本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方 ...

随机推荐

  1. Property type 'id<tabBarDelegate>' is incompatible with type 'id<UITabBarDelegate> _Nullable' inherited from 'UITabBar'

    iOS报错:Property type 'id' is incompatible with type 'id _Nullable' inherited from 'UITabBar' 如图: 可能原因 ...

  2. 用CALayer实现淡入淡出的切换图片效果

    由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...

  3. windows下安装mysql笔记

    接着上几篇文章再来看下windows下安装mysql. 我这里是windows7 64位, 安装过程中还是遇到一些坑,这里记录下. 一.下载安装包 打开mysql官网下载页面:http://dev.m ...

  4. 单点登录CAS使用记(三):实现自定义验证用户登录

    问题: CAS自带的用户验证逻辑太过简单,如何像正常网站一样,通过验证DB中的用户数据,来验证用户以及密码的合法性呢? 方案1:CAS默认的JDBC扩展方案: CAS自带了两种简单的通过JDBC方式验 ...

  5. js鼠标右键操作

    一个页面中,BODY中用oncontextmenu='return false'来取消鼠标右键: 在JS中设置oncontextmenu='return true'用window.document. ...

  6. explicit 关键字

    C++ explicit关键字用来修饰类的构造函数,表明该构造函数是显式的,既然有"显式"那么必然就有"隐式",那么什么是显示而什么又是隐式的呢? 如果c++类 ...

  7. Qt Quick App的两种启动模式

    QQmlApplicationEngine搭配Window QQuickView搭配Item 两者不同之处在于: 使用QQuickView显示QML文档,对窗口的控制权(比如设置窗口标题.Icon.窗 ...

  8. jsp连接MySQL操作GIS地图数据,实现添加point的功能

    index_map.jsp中的代码: <%@ page language="java" pageEncoding="utf-8"%> <%@ ...

  9. LR:Code - 60990,Code - 10343 问题解决

    Code - 60990 Error: Two Way Communication Error: Function two_way_comm_post_message /two_way_comm_po ...

  10. PHP自动添加http://头 转换网址为链接

    有时候,当我们需要用户输入网址的时候,一般我们会让用户省略掉"http://",当提交完成后用代码自动再加上http://,若有需要,我们 还可将网址转换成链接的形式,类似于众多网 ...