Datatables入门使用

一、引入相关的js和css文件

1、引用在线的CDN文件或者下载后在本地引用
2、由于datatables实在jquery基础上开发的插件,在引入datatables相关的JS和css,需要先引入jquery文件
3.两个文件分别是:

  • js:jquery.dataTables.min.js
  • css:jquery.dataTables.min.css

二、初始化表格

1.通过$()选定要操作的表格例如

  1. $(document).ready(function(){
  2. $('#myTable').DataTable();
  3. });

三、Datatables的使用的两种方式

1.通用简单配置:

(1).在$('#myTable').DataTable({...});里面做简单的基础配置:

  • 语言配置:配置中文
  1. language: {
  2. "processing": "处理中...",
  3. "lengthMenu": "显示 _MENU_ 项结果",
  4. "zeroRecords": "没有匹配结果",
  5. "info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
  6. "infoEmpty": "显示第 0 至 0 项结果,共 0 项",
  7. "infoFiltered": "(由 _MAX_ 项结果过滤)",
  8. "infoPostFix": "",
  9. "search": "搜索:",
  10. "searchPlaceholder": "搜索...",
  11. "url": "",
  12. "emptyTable": "表中数据为空",
  13. "loadingRecords": "载入中...",
  14. "infoThousands": ",",
  15. "paginate": {
  16. "first": "首页",
  17. "previous": "上页",
  18. "next": "下页",
  19. "last": "末页"
  20. },
  21. "aria": {
  22. "paginate": {
  23. "first": "首页",
  24. "previous": "上页",
  25. "next": "下页",
  26. "last": "末页"
  27. },
  28. "sortAscending": "以升序排列此列",
  29. "sortDescending": "以降序排列此列"
  30. },
  31. "thousands": "."
  32. }
  • 保存当前数据信息,重载是直接调用
    "stateSave": true,"stateDuration": -1,
  • 表格列信息配置:每列的数据都可以单独配置常见配置字段:data(必要),orderable(是否开启排序),name(字段名字),render(处理当前数据)
  1. columns: [{
  2. data: 'id'
  3. }, {
  4. data: 'name',
  5. orderable: false
  6. }, {
  7. data: 'email',
  8. orderable: false
  9. }, {
  10. data: 'title'
  11. }, {
  12. data: "status",
  13. render: function(data, type, row) {
  14. return data > 0 ? "开启" : "禁用";
  15. }
  16. }],
  • 自定义列信息配置:(data:当前数据,type:数据格式,row:当前行数据集合)
  1. "columnDefs": [{
  2. "targets": 5,//自定义的列(数字标识第几列的索引,从0开始)
  3. "render": function(data, type, row) {return '返回处理过的数据';}
  4. }],

1.1前端处理数据

  • 前端处理数据一般用于数据小于1000条,在初始化datatables前先通过ajax获取数据,赋值给datatables配置项中的data字段即可
    返回的数据类型是数组和对象两种不同配置方式请参考:
    http://datatables.club/manual/data/

1.2后端处理数据

(a)、前端配置:

  • 后端处理数据一般用于数据量非常大时
  • 跟前端配置不同的时:不需要配置data字段;
  • 需要前端配置:serverSide:true;来开启后端配置
  • 数据来源在ajax字段中配置:
    • url:请求地址
    • type:请求类型
    • dataType:返回数据类型
    • dataSrc:自定义数据接收的字段

(b)、后端接收参数和返回参数

1.接收参数字段:

  • draw:前端求情唯一标识
  • start:当前页数据的条目起始数
  • length:页面的显示的条目数
  • order:需要排序的信息:
    • column:需要排序的列的索引,一般通过索引(前端的列信息)获取需要排序的字段
    • dir:排序的规则:默认asc升序,desc降序
  • search:搜索的的值
    2.后端返回的值(通过数据库相关查询操作获取前端的需要的值返回即可);

    3.提示:特别注意前后端数据的配置

更多相关文章

  1. 用 Python 开发一个企业级的监控平台
  2. 面向千万级用户的运维事件管理之路
  3. 必会:关于SparkStreaming checkpoint那些事儿
  4. 微信海量数据监控的设计与实践
  5. 重要 | mr使用hcatalog读写hive表
  6. mysqldump备份数据库出现(Couldn't execute 'SHOW VARIABLES LIKE
  7. 2021年哪款BI软件比较好用?
  8. 入门大数据必读
  9. oracle12c安装

随机推荐

  1. 在C/C++中如何使用extern关键字
  2. c#中反射是什么?
  3. c++输出二维字符矩阵对齐
  4. C++实现逐行读取txt文件中的字符串以及文
  5. openjudge 2971:抓住那头牛 解题过程(附代
  6. C#学习之面向对象如何调用类以及普通方法
  7. Ruby和C ++之间的异同点是什么?
  8. .net中的重载是什么?
  9. C++ vector容器函数使用范例
  10. 【C语言】5种妙招教你轻松搞定变量值交换