当前位置 主页 > 服务器问题 > win服务器问题汇总 >

    Jquery Datatables的使用详解

    栏目:win服务器问题汇总 时间:2020-01-30 23:25

    参考:

    Datatables中文网

    Datatables官网

     Datatables 是一款强大的Jquery表格处理插件,样式方面可以兼容bootstrap3/4、JqueryUi等,也有默认的样式可以选择。使用Datatables可以很灵活的从服务端通过ajax更新表格数据,实现排序、分页等功能。

    一、安装

    登录官网下载,可以看到有一个选择的表单让你自定义下载包的内容,可以选择样式、扩展组件、Jquery库等,这个可以根据自己的需求下载,也可以先只下载Default的就可以了。

    在你的项目中使用 DataTables,只需要引入三个文件即可,jQuery库,一个DataTables的核心js文件和一个DataTables的css文件。有的时候还需要DataTables样式的一些资源。

    二、数据的绑定

    如何将数据显示到Datatables中呢,有三种方式:

    1. Dom

    如果在html中生命的table标签下,tbody中有已经编辑好的数据的话,会直接显示出来。

    <table  class="display">
     <thead>
      <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      </tr>
     </thead>
     <tbody>
      <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
      </tr>
      <tr>

    2. JavaScript

    可以在js中定义好数据源,然后在DT初始化的时候,通过data选项为表格配置数据,数据源可以是数组、对象、实例三种形式。

    (1)数组

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

    (2)实例

     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' }
     ]
     } );

    (3)对象

    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"
     }
     ];
     //object可以如下初始化表格
     $('#example').DataTable( {
     data: data,
     //使用对象数组,一定要配置columns,告诉 DataTables 每列对应的属性
     //data 这里是固定不变的,name,position,salary,office 为你数据里对应的属性
     columns: [
      { data: 'name' },
      { data: 'position' },
      { data: 'salary' },
      { data: 'office' }
     ]
     } );

    可以看到,在html中定义好一个id是example的table后,可以使用DT提供的选项进行初始化,data是数据,可以将要展示的数据对象放到data选项后,然后通过columns选项为每一列的属性进行定义,DT就会根据columns中定义的属性找到对象中的成员进行绑定,如果是数组的话,会按照数组中定义的数据依次绑定到每一列上进行展示。