BootstrapDataTables 配置和使用

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.底下大家看下其余计划

  • 页面代码很简短

  • 基础配置

    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>
  • Bootstrap,<“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": ""
}

诸如此类绑定就马到成功了,其余的参数有不太驾驭的可以自动百度,或者去官网看一看。

相关文章