Summary of jQuery table plug-in datatables usage

Summary of jQuery table plug-in datatables usage_jquery

WBOY

Release： 2016-05-16 15:07:35

Original

1235 people have browsed it

DataTables is a jQuery table plug-in. This article shares with you how to use the table plug-in datatables and introduces some basic knowledge. The specific content is as follows

1. Initialization
In the page

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" 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>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</td>
  </tr>
 </tbody>
</table>
 </body>
</html>

Copy after login

Initialization in js

$(document).ready( function () {
 $('#table_id').DataTable();
} );

Copy after login

2. Common configurations
During initialization, you can configure the table through some commonly used configuration items. This is what I actually used in the project

$("#vivo_table_list").dataTable({
   pageLength: 10,  //更改初始页面长度 （每页的行数）
   processing: true, //显示正在处理字符串
   serverSide: false, // 服务器模式，这一点非常奇怪*
   ordering: true,   // 是否启用Datatables排序
   searching: false,  // 开启搜索
   autoWidth: false,
   zeroRecords: "没有查询数据",
   destroy: true,   // 从当前上下文销毁掉Datatables对象 (妹搞懂)
   pagingType: "input", // 分页按钮种类显示选项
   language: {
    url: "cn.txt" // 本地化
   },
   dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
   ajax: {
    url: "/url",
    type: "post", // ajax请求的类型 **
    data: function () {
     return that.getQueryParams(); // ajax的参数
    }
   },
   columns: [
    {title: "id", data: "id", orderable: true},
    {title: "uid", data: "uid", orderable: false},
    {title: "昵称", data: "nick", orderable: false},
    {title: "姓名", data: "name", orderable: false},
    {title: "电话", data: "tel", orderable: false},
    {title: "申请时间", data: "stimeshow", orderable: true},
    {title: "状态", data: "statshow", orderable: false},
    {
     title: "操作", orderable: false, render: function (data,type,full) {
     return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="hidden" value="'+full.id+'"/>';
    }
    }
   ]
  });

Copy after login

The data returned by the background must be a map, the key is "data", and the value is the data (if the data is a List, toArray() is required), where data is also one of the parameters of DataTables, indicating the data to be displayed in the table, so You can put other table parameters in this map, just set the key to the parameter name.

*: In the configuration, serverSide turns on the server mode. During work, the data of the table is obtained from the background through ajax, so this mode is turned on as a matter of course, but the table is for certain The function of sorting by one column was disabled, and then I turned off this mode and found that I could sort the columns in the table, and the data in the table was still obtained from the server... So this mode still needs to be studied

**: In the project, the parameters received by the background controller are arrays. When the ajax request contains complex parameters, the request type must be post;

3. Advanced functions
1. Hidden columns
You can specify whether the column is displayed through the "columns.visible" attribute, but this way you cannot get the value of this column. If you want to hide the id column and trigger an event based on the id, you can't do it = =. Later, after checking the API, I came up with a stupid idea. The solution is to use the columns.render attribute. The usage is as follows:

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}

Copy after login

Note that the function after render has three parameters, data/type/full, where the full parameter is all the data in the row (the official website notes here: only the data in the row, not the value of the data attribute, so even if the data is in There is the value you want, but you can’t get it if you don’t give it a column). You can directly use the value you want to hide in render. If you want to reference this value outside the table, you can assemble a hidden < in render. ;input>, it can be obtained externally, but this method is really stupid. If you have a good method, please tell me.

2. Enter the page number to jump to the page
We can set the table paging button style through the pagingType attribute, but several default styles of DataTables do not have the style to enter the page number to jump required in the project. However, several paging button plug-ins are introduced on the plug-in page of the official website. Among them, the input paging plug-in can meet our needs. Just introduce the js of the plug-in and change the value of pagingType to "input". The CDN of js files is:

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

DataTables official website