JQuery DataTables Options Record

Reference Document:DataTables reference page

Brief introduction

Columns is an array that specifies the definition of the columns that the DataTables contains, each of which includes the following attributes:

Columns.data: Used to specify the field name, the possible values are:

• Undefined: When designated as undefined, columns.defaultcontent will be used instead; If columns.defaultcontent is not specified, DataTables will make an error;
• Null: When specified as NULL, if Columns.render has been defined, the data passed to rendering function will be all the data for the current row of the original data source, and if there is no renderer, Columns.defaultcontent will work, and if no defaultcontent is specified, the display data will be an empty string. Null is available for all other data types.
• Function: When specified as a function, functions are executed and the return value is displayed as the content. In DataTables 1.10.1, this function executes within the same scope as the data object of the current row.

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

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

The type integer that the Data property can use:

Specifies the array index in the data source. This is the default value used by the DataTables (increment per column).

String

An object property of the data source when the object is read and written. There are 3 special option values that you can use to change the way DataTables reads data from the data source object:

. –dotted Javascript notation. Just like you used in JavaScript. This can also be used in the Data property, just as you would read nested objects. For example:browser.version or browser.name. if the object parameter name contains., use \ \ Escape, such as First\\.name.

[]–array notation. DataTables can automatically merge data from an array data source, using the provided word to match the data between the brackets. For example: name[,] will generate a comma-delimited sequence from the original array. If no characters are specified between the brackets, the data from the original array is returned.

() –function notation. adding () At the end of the argument will execute the function given the name. such as: Browser () is a simple function executed on the data source; Browser.version () is a function on a nested property, or even browser (). Version is an object property that is obtained from the function return value. It is recommended that you use function notation instead of data in render, because it is simpler to use as a renderer.

Null:

Extracts directly from the original data source of the current row instead of in the original data source. This action will have an effect on the other two initialization options:

Columns.defaultcontent: The current cell uses the value defined in Defaultcontent when the value of the data option is null and when the defaultcontent of the forefront is specified.

Columns.render: When the data option value is null and the render option is specified, the entire source of the current row will be renderer used.

Object

Different data types are used for DataTables requests (filter, display, type, sort). The property name of an object is the data type that the property executes, and the property value can be defined using an integer, string, or function, and the Columns.data rule applies equally. Note You must specify the _ option. This is the default value if you do not specify the data type of the DataTables request. Such as:

"Data":{    "_": "Phone",    "filter": "Phone_filter",    "display": "Phone_display "}

function data (row, type, set, meta)

The given function is executed when the DataTables needs to read or the value of this cell.

The function may be called multiple times because DataTables calls the function –sorting, filtering, and display for the 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 is used to obtain an API instance if required.

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

Default

The index value of the column is automatically used.

The sample reads the table data from the 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" }  ]} );

To read information from a deep nested object:

//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 into 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 to 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 efficiencyRow.price_display = val== ""? "" : "$"+NumberFormat (Val); Row.price_filter= val== ""? "": "$" +numberformat (val) + "" +Val; return; }      Else if(Type = = = ' Display ') {        returnRow.price_display; }      Else if(Type = = = ' Filter ') {        returnRow.price_filter; }      //' sort ', ' type ' and undefined all just use the integer      returnRow.price; }  } ]} );

Use default content:

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

Use array notation– to output a sequence from the array:

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

The text is translated DataTables official documents, only for the record review only.

JQuery DataTables Options Record