JS表格插件DataTables

简介

• DateTables是一款jQuery表格插件，可以将任何HTML表格添加交互功能。

  • 分页，即时搜索和排序
  • 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
  • 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
  • 各式各样的扩展: Editor, TableTools, FixedColumns ……
  • 丰富多样的option和强大的API
  • 支持国际化
  • 超过2900+个单元测试

• 学习文档 官网手册

如何使用

  ```html
  <!--引入css和js资源，要先引入jQuery-->
  <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  
  <!-- 直接调用即可，可在方法中传递参数 -->
  $(document).ready( function () {
      $('#table_id').DataTable();
  } );
  ```

数据

• 三个核心概念：

  • Processing mode
  • Data types
  • Data sources

  Processing mode

  1. 客户端处理：数据集完整加载，在浏览器端进行处理（分页、排序等），默认方式。
  2. 服务器端处理：数据在服务器端处理，每次表重绘都发一个Ajax请求，只返回需要的数据。
     注：一般小于10000行用客户端处理，多于100000行用服务器处理，中间酌情处理。客户端处理易于使用，但面对大数据量时性能底下。

  Data source types

  主数据源必须是一个数组Arrays，DataTables可以使用三种行数据源：Arrays，Obejcts，Instances。

  • Arrays 很容易使用，数组（二维）中的每一个元素对应表中的一行即可。

    //数据
    var data = [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$3,120"
        ],
        [
            "Garrett Winters",
            "Director",
            "Edinburgh",
            "8422",
            "2011/07/25",
            "$5,300"
        ]
    ]
    
    //Table初始化
    $('#example').DataTable( {
        data: data
    } );
    

  • Objects 用起来比较直观，使用属性名命名列名即可。

    var data =
    [
        {
            "name":       "Tiger Nixon",
            "position":   "System Architect",
            "salary":     "$3,120",
            "start_date": "2011/04/25",
            "office":     "Edinburgh",
            "extn":       "5421"
        },
        {
            "name":       "Garrett Winters",
            "position":   "Director",
            "salary":     "$5,300",
            "start_date": "2011/07/25",
            "office":     "Edinburgh",
            "extn":       "8422"
        }
    ]
    
    //Table初始化，通过columns.data属性指定所需的数据
    $('#example').DataTable( {
        data: data,
        columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'salary' },
            { data: 'office' }
        ]
    } );
    

  • Instances 使得能使用对象的方式来传递数据。在表中写出属性或函数名，即可自动获得值。

    function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;
     
        this.office = function () {
            return this._office;
        }
    };
     
    $('#example').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office' },
            { data: 'position' }
        ]
    } );
    

  Data Sources

  DataTables可使用三个基本数据源获取数据：DOM(即HTML)，JavaScript，Ajax。

  • DOM方式即使用<table>中已经存在的数据，这是最简单的方式。(若使用Ajax获取新数据，会覆盖原有数据)
  • JavaScript方式可以搭配DataTables提供的Options及API使用，实现动态的添加删除数据。
  • Ajax方式与JavaScript方式非常相似，使用Ajax调用获取数据，但是不能使用Instances(JSON不支持)

    var data=
    {
        "data": [
            {
                "name": "Tiger Nixon",
                "position": "System Architect",
                "salary": "$320,800",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": "5421"
            },
            ...
        ]
    }
    //通过ajax.dataSrc属性指定需要获取的数据的位置
    $('#myTable').DataTable( {
        ajax: {
            url: '/api/myData',
            dataSrc: 'data'
        },
        columns: [ ... ]
    } );
    

Options

1. DataTables提供了大量选项用来定制向终端用户显示界面和可用功能的方式。这些选项可以在初始化时配置。

   $('#example').DataTable( {
       paging: false, //分页功能
       scrollY: 300, //允许垂直滚动
       ajax , //Ajax数据源配置
       data , //源自JavaScript的数据
       serverSide , //启用服务器端处理
       columns:data , //列的数据源选项
   } );
   

2. DataTables还支持H5的数据属性

   • data-order
   • data-page-length
   • data-class-name
   • data-* …

3. 设置默认值
   使用 $.fn.dataTable.defaults 可以设定默认值，所有DataTables初始化都使用这个参数，这个在具体初始化时可以被覆盖。

    // Disable search and ordering by default
    $.extend( $.fn.dataTable.defaults, {
        searching: false,
        ordering:  false
    } );
     
    // For this specific table we are going to enable ordering
    // (searching is still disabled)
    $('#example').DataTable( {
        ordering: true
    } );
   

4. 扩展选项
   DataTables有丰富的扩展(Extensions)，扩展也提供了诸多选项可以使用。

API

DataTables及扩展有广泛的API，可用于访问表中数据，并在初始化完成后对表进行操作。

• API由六个关键领域组成：
  • Tables
  • Columns
  • Rows
  • Cells
  • Core
  • Utilities
• 访问API的三种方式
  • $(selector).DataTable();
  • $(selector).dataTable().aip();
  • new $.fn.dataTable.Api(selector);
  • 每个选择器的结果都是DataTables API对象的一个实例，其上下文中有选择器找到的表。
  • 注意区别$(selector).DataTable()返回的是API实例，$(selector).dataTable()返回的是jQuery对象。
• Chaining 链接
• DataTables API中大量使用链接，许多DataTables方法返回API实例本身，因此可以立即调用另一个API方法。

   var table = $('#example').DataTable();
   table.search( 'Fiona' ).draw();
  
   //等价于
   var table = $('#example').DataTable();
   table.search( 'Fiona' );
   table.draw();
  

• 单数/复数方法
  • 在使用API时会注意到这些方法使用了很少见的复数和单数术语。如rows().data()和row().data()，其中前者是返回所选的多行数据，后者返回单行数据。
  • 这使得API的使用更为直观(intuitive)。

Events

DateTables使用on()方法触发自定义的DOM事件，DT提供了on()方法，也可以使用jQuery的on()方法。

• 所有的DataTables事件以.dt结尾，相当于命名空间。如果使用DataTables的on()来触发事件，则会自动添加，如果使用jQuery的on()来触发，则需要在事件后面加.dt。

  //以DT的方式
  var table = $('#example').DataTable();
  table.on( 'draw', function () {
      alert( 'Table redrawn' );
  } );
  
  //以jQuery的方式
  $('#example').on( 'draw.dt', function () {
      alert( 'Table redraw' );
  } );
  

• DataTables提供off()方法以移除事件。
• DataTables提供了在表的生成、销毁、变更、ajax请求、选择等时刻的事件

Server-side Processing

• 客户端发送ajax请求时需要携带这些参数

  参数名	类型	描述
  draw	integer	当前请求的画布数，确保服务器返回的是正确的
  start	integer	当前数据集的起始位置
  length	integer	当前表格能展示的行数
  …	…	…

• 服务器返回JSON时会携带这些参数

  参数名	类型	描述
  draw	integer	当前返回的画布数，对应请求项，建议记住这个数，以防XSS攻击
  recordsTotal	integer	过滤前的总的记录数
  recordsFiltered	integer	过滤后总的记录数，不是当前返回的记录数，不要弄错了
  data	array	要在表格上展示的数据，这个参数名可以被ajax.dataSrc修改
  error	string	服务器在处理过程中出错了就使用这个参数，没错就不要用

国际化

配置language选项即可实现国际化。

• 可以通过url来简单配置

  $('#example').DataTable( {
      language: {
          url: '/localisation/fr_FR.json'
      }
  } );
  

• 支持修改数字的显示格式

  $('#example').DataTable( {
      language: {
          decimal: ",",
      }
  } );
  

• 社区提供了国际化的翻译 i18n，可以直接本地引用，也提供了CDN