jquery Table Plugin DataTables Usage Summary _jquery

DataTables is a jquery form plug-in, this article for you to share the table plug-in DataTables usage, introduced the basic part of the knowledge, specific content as follows

First, initialization
In the page

<! DOCTYPE html>
 
 

In JS initialization

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

Second, commonly used configuration
The table can be configured with some commonly used configuration items when initializing, which I actually use in the project

$ ("#vivo_table_list"). DataTable ({pagelength:10,//Change initial page length (number of rows per page) Processing:true,//Display processing string serverside: False,//server mode, this is very strange * ordering:true,//whether to enable DataTables sort Searching:false,//Open search Autowidth:false, ze  Rorecords: "No query Data", Destroy:true,//Destroy from the current context DataTables objects (sister understand) Pagingtype: "Input",//Page button type display options language: {url: ' cn.txt '//localization}, Dom: ' tr< ' row-fluid ' < ' span6 ' i>< ' span6 ' p>> ',///in which order the control elements of the table are defined appear on the page ( Sister to understand) Ajax: {url: "/url", type: "POST",//AJAX requested Types * * Data:function () {return that.getqueryparams (); Ajax parameters}, columns: [{title: "id", Data: "id", orderable:true}, {title: "UID", Data: "UID", order Able:false}, {title: "nickname", Data: "Nick", Orderable:false}, {title: "Name", Data: "Name", Orderable:false}, {T Itle: "Telephone", Data: "Tel", Orderable:false}, {title: "Application Time", Data: "Stimeshow", Orderable:true}, {title: "Status", DAT A: "Statshow", orderAble:false}, {title: "Operations", Orderable:false, Render:function (data,type,full) {return ' <button id= ' ms Gsndbutton "class=" msgsnd glyphicon glyphicon-comment "></button> ' + ' <button id=" Forbidbutton "class=" f
    Orbid glyphicon Glyphicon-thumbs-down "></button> ' + ' <input type=" hidden "value=" ' +full.id+ ' "/>";
 }
    }
   ]
  });

The data returned by the background must be a map,key is "data", the value is (if the data is a list to ToArray ()), which is also one of the DataTables parameters, indicating the data the table to display, So you can put other table parameters in this map, just set the key to the parameter name.

*: in the configuration serverside open the server mode, in the work using the table data is obtained through Ajax from the background, it is natural to open this mode, but the table for a column sorting function is invalid, and then I closed this mode, Discover that you can sort the columns in the table, or get the table data from the server ... So this pattern has yet to be studied.

* * *: in the project in the background controller received parameters are arrays, the AJAX request contains complex parameters, the type of request must be post;

Third, advanced function
1. Hide Columns
You can specify whether the column is displayed by the "Columns.visible" property, but you cannot get the value of this column, but if you want to hide the ID column, you will not be able to trigger the event by id = =, then look up the API after thinking of a stupid way, you can use the Columns.render attribute, Usage is as follows:

{
  title: "Action", Orderable:false, Render:function (data,type,full) {return
  ' <input type= ' hidden ' value= ' + Full.id+ '/> ';
  }

Note that the render function has three parameters, Data/type/full, where the full parameter is a row of all the data (official website Here Note: Only the data in the row, not the value of the Data property, so even if you have the value of data, but you do not give him a list is also not available) , you can directly use the value you want to hide in the render, if the table to reference this value, you can assemble a hidden <input> in the render, the external can be obtained, but this method is really stupid, if you have a good method, please do tell me.

2, enter page number jump pages
We can set the table pagination button style through the Pagingtype property, but the DataTables default styles do not have the style of entering page numbers that are required in the item. But in the official website of the plug-in page introduced several paging button plug-ins, where the input paging plug-in can meet our needs, as long as the introduction of plug-in JS, and then the Pagingtype value to "input" on it. The CDN for 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 to help you learn.

DataTables official website