datatable使用介绍

Posted 2020-10-28 沧海一粟，何以久远

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了datatable使用介绍相关的知识，希望对你有一定的参考价值。

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何html表格添加高级的交互功能。

1、支持分页：前台分页和后台分页

前台分页：后台一次把数据传过来，交给前端渲染。缺点：初次渲染时间长；优点：渲染完成后，搜索和排序速度很快

后台分页：前端把每页显示的条数、查询的页数、搜索的内容、排序列等信息传给后端，后端收到这些信息后，去数据库里查询指定页的信息，并统计出总共条数等信息，而后传给前端。缺点：每次排序、搜索、翻页都要去后台查库，耗时；优点：初次渲染快

共同点：随着数据量的增大，二者的查询时间都会变成。但是前台分页，需要网络传输大量的后台信息到前台，网络传输时间长，前端渲染压力大；后台分页每次只传输固定量的数据，网络耗时少，但是查库次数多。总得来看，对于数据量递增的情况，还是选用后台分页

2、其他功能见官网：举例、手册、插件、接口、论坛、博客等，一应俱全。看着样例，比葫芦画瓢总会的

中文官网：http://datatables.club/example/ 里面有大量的信息

英文官网：https://datatables.net/examples/server_side/post.html

3、1.10+版本前后，有些参数名字有调整，但是具有向下兼容性

4、后台分页的例子：https://datatables.net/examples/server_side/

JS代码

$(document).ready(function() {
    $(‘#example‘).DataTable( {
        "processing": true,      //翻页或者搜索的时候，前端是否给出“正在搜索”等提示信息
        "serverSide": true,     // true表示使用后台分页
        "ajax": {
            "url": "scripts/post.php",  // 异步传输的后端接口url
            "type": "POST"      // 请求方式
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

html代码：添加一个table标签,表头和表尾信息，必须有表头信息<thead>; <tbody></tbody> 可以不用，dataTables.js可以动态加载

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

ajax调用后端接口，后端接口返回信息的格式

{
  "draw": 1,       //这个可以不写，有时候写会有问题，但是官方基于安全角度考虑建议写
  "recordsTotal": 57,  //总条数、总行数
  "recordsFiltered": 57,  //过滤出来的总行数、条数
//下面是前端展示的数据内容
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    }]
}

下面是数据表的初始化设置：控制前端界面展示情况

$(function () {
    $(‘#test-interface-table‘).dataTable(
      {
          "ajax": {
              "url": "/a/b",
              "type": "POST"
          },
          "processing": true,
          "serverSide": true,
          "bPaginate" : true,//分页工具条显示
          "bFilter" : true, //搜索栏
          "bSort" : false, //是否支持排序功能
          "order": [[3, "desc"]],//默认使用第几列排序
//中文化界面显示
          "language": {
              "lengthMenu": "每页显示 _MENU_条数据",
              "sSearch": "搜索: ",   //搜索框label
              "sSearchPlaceholder":"区域、项目名称、场景名字、执行人", //搜索框里的提示信息placeholder
              {#info: "当前是_PAGE_页，总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。#}
              "info": "第_PAGE_/_PAGES_页, 显示第_START_到第_END_, 搜索到_TOTAL_/_MAX_条",
              "infoFiltered":"", //过滤时的显示信息
              "sProcessing": "正在加载数据，请稍等",  //翻页、搜索时的前端提示信息
              "zeroRecords": "抱歉，没有数据",  //无数据时的前端信息

              paginate: {//分页的样式内容。
                        previous: "上一页",
                        next: "下一页",
                        first: "第一页",
                        last: "最后"
                    }
          }

      }
      );
});