JQuery DataTables options record, jquerydatatables

JQuery DataTables options record, jquerydatatables

Reference: DataTables reference page

Introduction

Columns is an array used to specify the definition of the columns contained in the Ables. The attributes contained in each item include:

Columns. data: used to specify the field name. Possible values include:

• Undefined: when it is specified as undefined, columns. defaultContent is used instead. If columns. defaultContent is not specified, dataTables reports an error;
• Null: If it is specified as null, if columns. the render has been defined. The data passed to the rendering function is all the data in the current row of the original data source; if there is no renderer, columns. defaultContent will take effect. If defacontent content is not specified, the displayed data will be a null string. Null can be used for all other data types.
• Function: If it is specified as a function, the function is executed and the returned value is used as the display content. In Ables 1.10.1, this function is executed in the same scope as the Data Object of the current row.

The data attribute is an option that can be set and read. If you only need to format the data output, the columns. render option is better because it is read-only and easier to use.

After Ables 1.10.3, the data option can be used with a DOM data source to indicate where the data in each column of the DOM data source object should be stored. By default, DataTables will store the data in an array. However, with this option, you can provide an object property name to describe the structure of the used object.

Integer:

Specify the array index in the data source. This is the default value used by DataTables (each column increments ).

String:

An object attribute of the data source when reading and writing objects. Three special option values can be used to change the way DataTables reads data from the data source object:

.-Dotted Javascript notation. Just like you use. In Javascript to read nested objects, this can also be used in the data attribute. For example:Browser. versionOrBrowser. name.If the object parameter name contains., use \ escape, such as first \. name.

[]-Array notation. DataTables can automatically merge the data of the Array data source and use the provided characters to merge the data between brackets. For example, name [,] will generate a comma-separated sequence from the original array. If no character is specified between the brackets, the original array data is returned.

()-Function notation. Adding () at the end of the parameter will execute the Function with the given name. For example, browser () is a simple function executed on the data source; browser. version () is a function on nested attributes, or even browser (). version obtains an object attribute from the function return value. We recommend that you use function notation in render instead of data, because it is easier to use as a renderer.

 

Null:

Directly use the original data source of the current row, rather than extract from the original data source. This action will affect the other two initialization options:

Columns. defaultContent: when the data option value is null and the defaultContent of the current column is specified, the current cell uses the value defined in defacontent content.

Columns. render: when the data option value is null and the render option has a specified time, the entire data source of the current row will be used by renderer.

 

Object:

Use different data (filter, display, type, sort) for different data types of the Ables request ). The attribute name of an object is the data type of the attribute execution, and the attribute value can be defined using integer, string, or function. The columns. data rule is also applicable. Note that the _ option must be specified. This is the default value. If you do not specify the Data Type of the Ables request. For example:

"data":{    "_": "phone",    "filter": "phone_filter",    "display": "phone_display"}

 

Function data (row, type, set, meta)

When DataTables needs to read or the value of such cells, the given function will be executed.

This function may be called multiple times, because DataTables will call this function-sorting, filtering, and display for different data types it needs.

Parameter definition:

	Name	Type	Optional	Description
1	Row	Array, object	No	The data for the whole row
2	Type	String	No	The data type requested for the cell
3	Set	Any	No	Value to set if the type parameter is set. Otherwise, undefined.
4	Meta	Object	No	Since 1.10.1: An object that contains additional information about the cell being requested. This object contains the following properties: Row-The row index for the requested cell. Col-The column index for the requested cell. Settings-The DataTables. Settings object for the table in question. This can be used to obtain an API instance if required.

When the call type is set, the function return value is not required, but in other cases, the return value is used for the requested data.

 

Default

Automatically use the column index value.

The following example shows how to read table data from an object:

// JSON structure for each row in this example://   {//      "engine": {value},//      "browser": {value},//      "platform": {value},//      "version": {value},//      "grade": {value}//   }$('#example').dataTable( {  "ajaxSource": "sources/objects.txt",  "columns": [    { "data": "engine" },    { "data": "browser" },    { "data": "platform" },    { "data": "version" },    { "data": "grade" }  ]} );

 

Read Information from deeply nested objects:

// JSON structure for each row://   {//      "engine": {value},//      "browser": {value},//      "platform": {//         "inner": {value}//      },//      "details": [//         {value}, {value}//      ]//   }$('#example').dataTable( {  "ajaxSource": "sources/deep.txt",  "columns": [    { "data": "engine" },    { "data": "browser" },    { "data": "platform.inner" },    { "data": "platform.details.0" },    { "data": "platform.details.1" }  ]} );

Read the DOM data table to the data object:

$(document).ready(function() {    $('#example').DataTable({        "columns": [            { "data": "name" },            { "data": "position" },            { "data": "office" },            { "data": "age" },            { "data": "start_date" },            { "data": "salary" }        ]    });} );

 

Use the function data to provide different information for sorting, filtering, and displaying:

$('#example').dataTable( {  "columnDefs": [ {    "targets": 0,    "data": function ( row, type, val, meta ) {      if (type === 'set') {        row.price = val;        // Store the computed display and filter values for efficiency        row.price_display = val=="" ? "" : "$"+numberFormat(val);        row.price_filter  = val=="" ? "" : "$"+numberFormat(val)+" "+val;        return;      }      else if (type === 'display') {        return row.price_display;      }      else if (type === 'filter') {        return row.price_filter;      }      // 'sort', 'type' and undefined all just use the integer      return row.price;    }  } ]} );

 

Use default content:

$('#example').dataTable( {  "columnDefs": [ {    "targets": [ 0 ],    "data": null,    "defaultContent": "Click to edit"  } ]} );

 

Use array notation to output a sequence from the array:

$('#example').dataTable( {  "columnDefs": [ {    "targets": [ 0 ],    "data": "name[, ]"  } ]} );

 

This document translates the DataTables official documents and is only used for record review.