欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端插件:datatables的入门和使用

程序员文章站 2022-03-01 17:22:32
...

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获取数据(获取的json数据要转换成JSON.parse(res)数组),赋值给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.后端返回的值(通过数据库相关查询操作获取前端的需要的值返回即可);
    前端插件:datatables的入门和使用
    3.提示:特别注意前后端数据的配置