DataTables 配置和使用

2017-01-10 19:20:45来源:cnblogs.com作者:Commissar人点击

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": ""}

这样绑定就成功了,其他的参数有不太明白的可以自行百度,或者去官网看一看。



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台