JQuery Datatable-javascript API

Although most of the time your JavaScript interaction will be described by using a DataTable initialization object as part of using this site, sometimes you will find it useful for some external control tables. You can use the following functions from jquery. A DataTable object. There are also some plug-in API functions available that extend the functionality of the DataTable built-in functions that describe this page. Note For those using server-side processing: A large number of API functions assume that the data is stored on the client to complete it, rather than on the server side. Such features, such as Fnadddata and Fndeleterow, do not affect the data held on the database. In fact the DataTable doesn't know if you even use a database! Therefore, you must make calls to the server to manipulate the data requirements, and then simply re-delimit the table (Fndraw) to view the new data. $ executes a jquery selector action on the table of the TR element (from the tbody) and returns the result of the jquery object. Input Parameters:

1. {String| Node| jquery}: jquery selector or node collection act
2. {Object}: Modified row for optional parameter is included
3. {string} [Default=none]: Select the TR element to satisfy the current filter criteria ("applied") or all TR elements (i.e. no filters).
4. {string} [Default=current]: The order of the TR elements in the processing array. Can be "current", that is, the use of the current sort table, or "original" that is, the original order data read into the used table.
5. {string} [Default=all]: Restricts the selection of the currently displayed page ("current") or not ("all"). If the current is given, then the order is considered "current" and the filter is ' applied ' regardless of what they are

Return parameter:

{ Object}: JQuery object that filters the given selector. Code example:$ (document). Ready (function () {    var otable = $ (' #example '). DataTable ();    //Highlight every second row    otable.$ (' tr:odd '). CSS (' backgroundcolor ', ' Blue ');}); $ (document). Ready (function () {    var otable = $ (' #example '). DataTable ();   //Filter To rows with ' Webkit ' in them, add a background colour and then   //Remove the filter, thus highlighting The ' Webkit ' Rows only.    otable.fnfilter (' Webkit ');    otable.$ (' tr ', {         "filter": "Applied"    }). css (' backgroundcolor ', ' Blue ');     Otable.fnfilter (");}); One in the operation is almost the same as $, but in this case the data that is returned matches the row--so the jquery selector uses the TR line should match the node or the Td/thcell node instead of any descendants, so the data can fetch the rows/cells. If a matching row is found, the returned data is the original data array/object used to create the row (or a generated array if from a DOM source). This method is often useful to combine two $ functions given the same parameters and the array index will match exactly. Input Parameters:

1. {String| Node| jquery}: jquery selector or node collection act
2. {Object}: Modified row for optional parameter is included
3. {string} [Default=none]: Select the TR element to satisfy the current filter criteria ("applied") or all TR elements (i.e. no filters).
4. {string} [Default=current]: The order of the TR elements in the processing array. Can be "current", that is, the use of the current sort table, or "original" that is, the original order data read into the used table.
5. {string} [Default=all]: Restricts the selection of the currently displayed page ("current") or not ("all"). If the current is given, then the order is considered "current" and the filter is ' applied ' regardless of what they are

Return parameter:

{array}: The element that the data matches. If any element, the result of the selector, does not have a tr,td or th element in the DataTable, they will have an empty entry in the array.    Code example:$ (document). Ready (function () {var otable = $ (' #example '). dataTable ();    Get the data from the first row in the table var data = otable._ (' Tr:first '); Do something useful with the data alert ("First cell is:" + data[0);});    $ (document). Ready (function () {var otable = $ (' #example '). dataTable ();    Filter to ' Webkit ' and get all data for Otable.fnfilter (' Webkit ');    var data = otable._ (' tr ', {"filter": "Applied"}); Do something with the data alert (data.length + "rows matched the filter");FnadddataAdd a new row or multiple rows of data to the table. Note that this is suitable for client handling only-if you are using server-side processing (that is. "Bserverside": true), and then add the data, you must add it to the data source, that is, the server side, via an Ajax call. Input Parameters:1.{array|object}: Data is added to the table. This can be:

1D array of data-adding a single row

Array of arrays-one call to add multiple lines

Object-Data object in use Mdata

Array of objects-multiple data objects using Mdata

2.{bool} [Default=true]: Redraw table or do not redraw

Return parameter:{Array}: An array of integers that represents the index of the Aodata list ({@link DataTable.models.oSettings}) is added to the table Code Example:Global var for countervar gicount = 2;$ (document). Ready (function () {    $ (' #example '). dataTable ();}); function Fnclickaddrow () {    $ (' #example '). DataTable (). Fnadddata ([Gicount + ". 1", Gicount + ". 2", Gicount + ". 3", Gicount + ". 4"]);    gicount++;} fnadjustcolumnsizing  This function causes the DataTable to recalculate the size of the column, which is applied to the column (in the DOM, CSS, or through the Swidth parameter) based on the data and size in the table. It may be useful to change the width of the parent element of the table (for example, a window resizing). Input parameters: Enter parameter: {Boolean} [Default=true]: Redraw or do not redraw, you will usually want to return parameter: Return parameter: code example: Sample: $ (document). Ready (function () {    var otable = $ (' #example '). DataTable ({         "sscrolly": "200px",        "bpaginate": false   });     $ (window). Bind (' Resize ',    function () {         otable.fnadjustcolumnsizing ();   }); Fncleartable quickly and simply clear a table input parameters: input parameter: {bool} [Default=true]: Redraw or do not redraw reTurn parameter: Return parameter: code example: Example: $ (document). Ready (function () {    var otable = $ (' #example '). DataTable ();   //Immediately ' nuke ' the current rows (perhaps waiting for a Ajax callback ...)     otable.fncleartable ();}); Fnclose instead, an open line, this function will close any line that is currently "open". Input parameters: Enter parameter: {node}: The table row to ' close ' return parameter: Return parameter: {int}:0 succeeded, or 1 if failed (row not found) code example: Example: $ ( Document). Ready (function () {    var otable;   //' open ' an information row if a row is CL icked on    $ (' #example tbody tr '). Click (function () {        if ( Otable.fnisopen (this)) {            oTable.fnClose (this);        } else {             Otable.fnopen (this, "temporary row opened", "Info_row");       } & nbsp; });    otable = $ (' #example '). dataTable ();}); Fndeleterow deletes a row of input parameters: input parameter: {mixed}: The index is deleted from the Aodata row, or the TR element you want to delete {Function|null}: Callback Function{bool} [ Default=true]: Redraw or not redraw return parameter: Return parameter: {array}: Row is deleted code example: code example: $ (document). Ready (function () {     var otable = $ (' #example '). DataTable ();   //Immediately Remove the first row  & nbsp Otable.fndeleterow (0);}); Fndestroy restores the state of the table to remove all DataTable enhancements in the DOM, modifying the DOM structure of the table and event listeners. Input parameters: Enter parameter: {Boolean} [Default=false]: Completely delete table from Domreturn parameter: Return parameter: code example: Example: $ (document). Ready (function () {   //This example was fairly pointless in reality, but shows how Fndestroy can be used & nbsp;  var otable = $ (' #example '). DataTable ();    Otable.fndestroy ();}); Fndrawshow details Redraw The table redraws input parameters: input parameter: {bool} [Default=true]: Re-filter and reorder (if enabled) table before drawing table. Return parameter: Returned parameters: code Example: Example: $ (document). Ready (function() {    var otable = $ (' #example '). DataTable ();   //Re-draw the table–you wouldn ' t want To does it here, but it's an example     Otable.fndraw ();}); Fnfilter Data Filter input parameters: Input parameter: {string}: String to filter Table {Int|null}: Column limit filter to {bool} [Default=false]: Use regular expression or do not use {bool} [Default=true]: Perform smart filter or not {bool} [Default=true]: Display input global filter in its input box {bool} [Default=true]: Do not match case (true) or not (false) Return parameter: Returned parameter: code example: Example: $ (document). Ready (function () {    var otable = $ (' #example '). DataTable ();   //Sometime later–filter...    otable.fnfilter (' Test string ');}); Fngetdata gets the data for the entire table, a single row, or a single cell based on the supplied parameters. Input parameters: Enter parameter: {Int|node}: A TR line node, td/th cell node or an integer. If given as a TR node then the data source will return the entire row. If a Td/thcell node is given, then Icol will automatically calculate and return the data unit. If as an integer, then this can be thought of as a row of aodata internal data indexes (see FNGETPOSITION) and data using that row. {int}: The index of the optional column, the data you want. Return parameter: Returns the parameter: {array|object|string}: If Mrow is undefined, then the data returns all rows. If Mrow is defined, only the data, and icol the row definition, only the data is returned to the specified cell.code example: Example://Row data$ (document). Ready (function () {    otable = $ (' #example '). dataTable ();     otable.$ (' tr '). Click (function () {        var data = Otable.fngetdata (This);       //... do something with the array/object of data for th e row   }); /Individual cell data$ (document). Ready (function () {    otable = $ (' #example '). DataTable ();     otable.$ (' TD '). Click (function () {        var sData = Otable.fngetdata (This);        alert (' the cell clicked on had the value of ' + SData ');    );}); Fngetnodes gets an array of TR nodes for use in the table's body. Note that you will typically want to use the ' $ ' API method to take precedence over this because it is more flexible. Input parameters: Enter parameter: {int}: Optional row exponent for TR element you want return parameter: Return parameter: {Array|node}: If IRow is undefined, returns an array of elements in the body of all TR tables, Or irow is defined, only the TR element is required. code example: Example: $ (document). Ready (function () {    var otable= $ (' #example '). DataTable ();   //Get The nodes from the table    var nnodes = Otable.fnget Nodes ();}); Fngetposition gets the array index specific cell from its DOM element and column index including the hidden column input parameters: input parameter: {node}: This can be a tr td or TH, in the table of the Bodyreturn parameter: Return parameter: {int}: If Nnode is TR, then returns an index, or as a unit, an array (row index, column index (visible), column index (all)]. code example: Example: $ (document). Ready (function () {    $ (' #example tbody TD '). Click (function () {        //Get The position of the current data from the node     & nbsp;  var APos = otable.fngetposition (this);       //Get the data array for th Is row        var aData = Otable.fngetdata (apos[0]);        //Update the data array and return the value        adata[apos[1] ] = ' clicked ';        this.innerhtml = ' clicked ';   &nBsp });   //Init datatables    otable = $ (' #example '). dataTable ();}); Fnisopen checks that one line is "open" or not. Input parameters: Enter parameter: {node}: Table row check return parameter: Return parameter: {Boolean}: True if line is currently ' open ', false otherwise code example: $ ( Document). Ready (function () {    var otable;//' open ' an information row if a row is clicked On &nbs p;  $ (' #example tbody tr '). Click (function () {        if (Otable.fnisopen ( This)) {            Otable.fnclose (this);        } else {            Otable.fnopen (This, "temporary row opened", "Info_row");       }    });    otable = $ (' #example '). dataTable ();}); Fnopen This function adds a new line after the direct row is currently displayed on the page, with HTML content passed to the function. This can be used, for example, to require confirmation that a record should be deleted. Input parameters: Enter parameter: {node}: The table row to ' open ' {string|node|JQuery}: HTML put in line {string}: Class to give the new TD Cellreturn parameter: Return parameter: {node}: line already open. Note that if a table row passes in the first parameter, the table does not exist, and this method returns. code example: Example: $ (document). Ready (function () {    var otable;   //' open ' an Information row when a row is clicked on    $ (' #example tbody tr '). Click (function () {   &NB sp;    if (Otable.fnisopen (this)) {             Otable.fnclose (this);       } else {             Otable.fnopen (This, "temporary row opened", "Info_row");        }   });    otable = $ (' #example '). dataTable ();}); Fnpagechange Change Paging-provides internal logic paging in a simple API function. You can use this function to have a DataTable table for the next, previous, first, or last page. Input parameters: Enter parameter: {string|int}: Paging action to take: ' First ', ' previous ', ' Next ' or ' last ' or page number to jump T O (integer), note    Page 0 is the first page. {BOOL} [Default=true]: Redraw or do not redraw return parameter: Return parameter: code example: Example: $ (document). Ready (function () {    var otable = $ (' #example '). DataTable ();    otable.fnpagechange (' Next ');}); Fnsetcolumnvis display a specific column input parameters: input parameter: {int}: The display of the column is changed {BOOL}: Show (True) or hide (false) the column{bool} [default=t Rue]: Redraw or do not redraw return parameter: Return parameter: code example: Example: $ (document). Ready (function () {    var otable = $ (' # Example '). DataTable ();   //Hide The second column after initialisation    Otable.fnsetcolumnvis (1, false);}); Fnsettings gets set to a specific table for external operation input parameters: input parameter: Return parameter: Returned parameter: {object}: DataTable set object. See {@link DataTable.models.oSettings} sees {@link DataTable.models.oSettings}code Example: code example: $ (document). Ready ( function () {    var otable = $ (' #example '). DataTable ();    var osettings = Otable.fnsettings ();   //Show An example parameter From the settings    alert (Osettings._idisplaystart);}); Fnsort column that is sorted by a particular table input parameters: input parameter: {int}: Data index to sort. Note that this will not match "display index" if you have a hidden data entry return parameter: Return parameter: code example: Example: $ (document). Ready (function () {     var otable = $ (' #example '). DataTable ();   //Sort immediately with columns 0 and 1 &nbsp ;  Otable.fnsort ([[0, ' ASC '], [1, ' ASC ']];}); Fnsortlistener Add a sort listener to a given column element input parameters: input parameter: {node}: element append sort listener {int}: column click the node to sort {function}: The callback function is sorted when it is run return parameter: Return parameter: code example: Example: $ (document). Ready (function () {    var otable = $ (' # Example '). DataTable ();   //Sort on column 1 while ' Sorter ' is clicked on    Otable.fnsort Listener (document.getelementbyidx_x (' Sorter '), 1);}); Fnupdate Update a table cell or row-this method will accept a single value to update the cell, the array, and the value of an element for each column or object in the same format as the original data source. The self-referencing feature is designed to make multi-column updates easier. Input parameters: Enter parameter: {object|array|string}: Data to update CELL/ROW{NODE|INT}:TR element you want to update or Aodata Index{int}: Column update (MD not usedATA is an array or object) {bool} [Default=true]: Redraw or not {bool} [Default=true]: Execute pre-draw actions or not return parameter: Return parameter: {int}:0 succeeded, 1 Error code example: code example: $ (document). Ready (function () {    var otable = $ (' #example '). dataTable ();     otable.fnupdate (' Example update ', 0, 0);   //single cell    Otable.fnupdate ([' A ', ' B ', ' C ', ' d ', ' e '], 1, 0);   //Row}); Fnversioncheck provides a common way for the plugin to check the version of the DataTable being used in order to ensure compatibility. Input parameters: Enter parameter: {string}: Version string to check in the format "x y z". Note that the format "x" and "X Y" are also acceptable. Return parameter: Returned parameter: {Boolean}: True if this version of the DataTable is greater than or equal to the desired version, or False if this version of Datatales is inappropriate for code example: Example: $ (document ). Ready (function () {    var otable = $ (' #example '). DataTable ();    alert ( Otable.fnversioncheck (' 1.9.0′);});

JQuery Datatable-javascript API