jquery DataTable Parameter API

JQuery Plugin DataTables is an excellent form plugin that provides the ability to sort tables, browser paging, server paging, filtering, formatting, and more. DataTables's website also provides a large number of demos and detailed documentation, which are explained in step-by-Steps for easy learning.

First, you need to download the script library to DataTables's website http://www.datatables.net/, then, add the JQuery reference to the Web page, and then add the DataTables reference. Introducing CSS files and JS files--------------------------------------------------------------------------<style type= "Text/css" title= "        Currentstyle "> @import" Datatables-1.8.1/media/css/demo_page.css ";        @import "Datatables-1.8.1/media/css/demo_table.css"; @import "Datatables-1.8.1/media/css/demo_table_jui.css"; </style><script type= "Text/javascript" language= "JavaScript" src= "js/jquery.js" ></script><script type= "Text/javascript" language= "JavaScript" src= "js/ Jquery.dataTables.js "></script>---------------------------------------------------------------------- ---- -----------The simplest way:$ (document). Ready (function () {$ ("#example"). dataTable ();}); ----------can also define the properties themselves:<script type= "Text/javascript" language= "JavaScript" >        $ (document). Ready (function () {             $ ("#example"). DataTable ({//              &NB SP; " Bpaginate ": true,//switch, whether to display the pager//               " Binfo ": true,//switch, whether to display some information of the table//                 "Bfilter": true,//switch, whether to enable client filters//        &NBS P       "sdom": "<>lfrtip<>",//                "Bautowith ": false,//               " Bdeferrender ": false,//        &N Bsp       "Bjqueryui": false,//switch, whether jQueryUI style is enabled//                "Blen Gthchange ": true,//switch, whether to display the size of each page drop-down box//               " bprocessing ": true,//      &NBSp         "Bscrollinfinite": false,//                "sscrolly": "800px",//whether to turn on vertical scrolling, and specify the scrolling area size, can be set value: ' Disabled ', ' 2000px '//                ' Bsort ' : true,//switch, whether to enable columns with column-ordered functions//                "bsortclasses": true,//  &NBSP ;             "Bstatesave": false,//switch, whether to turn on the client status logging feature. This data is recorded in the cookie, after you open this record, even if you refresh the page, or reopen the browser, the previous state is saved-------value is true when Aocolumndefs cannot hide the column//                "SSCROLLX": "50%",//whether to turn on horizontal scrolling, and specify the scrolling area size, can set the value: ' Disabled ', ' 2000% '//                "aasorting": [[0, ' ASC ']],//              &NB SP; " Aocolumndefs ": [{" bvisible ": false," atargets ": [0]}]//hidden column//               " Sdom ": ' <" H "if>t<" F "if> ',                "Bautowidth": false,//adaptive width                 "aasorting": [[1, "ASC" ]],                "Spaginationtype": "Full_numbers",        & nbsp       "olanguage": {                    "sprocessing": "Positive In load ... ",                   " Slengthmenu ":" _menu_ records per page ",                    "szerorecords": "Sorry, we can't find the relevant data!" ",                   " semptytable ":" No data exists in the table! ",                   " Sinfo ":" Current display _start_ to _end_, Total _total_ records ", &N Bsp                   "sinfofiltered": "Data Sheets are _max_ records",      &N Bsp             "Ssearch": "Search",                     "opaginate": {            &NB Sp           "Sfirst": "Home",                    &N Bsp   "sprevious": "prev",                        "Snext": "Next Page ",                       " Slast ":" Last "      & nbsp            }               }//Multi-language configuration    & nbsp        });       });    </script>   ----------------page:   for dataTables, the table must be explained by Thead and Tbody, as shown below, <table cellpadding= "0" cellspacing= "0" border= "0" class= " Display "id=" example ">        <thead>            &LT;TR&GT;&NB Sp               <th>                    Rendering engine                </th>        &NBS P       <th>                    browser                </th>                &LT;TH&GT;&NB Sp                   Platform (s)                 </th>                <th>          &N Bsp     &NBSp   Engine version                </th>                <th>                  grade  CSS &nbs P             </th>            </tr>    &N Bsp   </thead>        <tbody>            &LT;TR class= "odd Gradex >                <td>            &NB Sp       trident                </td>       .         <td>                  Internet EXPL Orer 4.0                </td>            &NBSP ;   <td>                    Win 95+                </td>                &LT;TD class= "center" >  & nbsp                 4                &LT;/TD&G t;                &LT;TD class= "center" >          &NBS P         x                </td>      &NBSP ;     </tr> If there is no thead will be an error. the simplest way to use it is the way 0 is configured. /* * Example init */$ (document). Ready (function () {$ (' #example '). dataTable ();

Here are the parameters that you can attach when you are working with a DataTable binding:

Property name	Range of values	Explain
Bautowidth	True or FALSE, default True	Whether the table column widths are automatically calculated
Bdeferrender	True or FALSE, default false	One parameter for rendering
Bfilter	True or FALSE, default True	Switch, whether the client filtering feature is enabled
Binfo	True or FALSE, default True	switch, whether to display some information about the table
Bjqueryui	True or FALSE, default false	Whether to use the jquery UI Themeroller style
Blengthchange	True or FALSE, default True	switch, whether to display a selection bar per page length (requires a pager support)
Bpaginate	True or FALSE, default True	switch, whether to display (use) the page splitter
Bprocessing	True or FALSE, Defualt false	Switch to specify whether the "processing" message is displayed when the data is being processed
Bscrollinfinite	True or FALSE, default false	Switch to specify whether infinite scrolling (used in conjunction with sscrolly) is useful in large amounts of data. When this flag is true, the paging device is closed by default
Bsort	True or FALSE, default True	Switch, do you want columns to have sort by column function
Bsortclasses	True or FALSE, default True	Switch that specifies whether to increase classes ' sorting_1 ', ' sorting_2 ' and ' sorting_3 ' when the current column is sorted, and when it is open, performance is lost when processing big data
Bstatesave	True or FALSE, default false	Switch, whether to turn on the client state logging feature. This data is recorded in the cookie, after you open the record, even if you refresh the page, or reopen the browser, the previous state is saved.
Sscrollx	' Disabled ' or ' 100% ' similar string	Whether to turn on horizontal scrolling and specify the size of the scroll area
Sscrolly	' Disabled ' or ' 200px ' similar string	Whether to turn on vertical scrolling and specify the size of the scrolling area
--	--	--
Options
Aasorting	Array array[int,string], such as [], [[0, ' ASC '], [0, ' desc ']	Specify the basis for sorting by multiple columns of data
Aasortingfixed	Ditto	Ditto. The only difference is that they cannot be conflicting with the user's custom configuration.
Alengthmenu	Default [10, 25, 50, 100], can be a one-dimensional array, can also be a two-dimensional array, such as: [[Ten,, 1,-+], [ten, A, +, "all"]]	This is to select the number of entries per page, when using a two-dimensional array, the two-dimensional plane can only have two elements, the first is to display the number of entries per page option, the second is about these options explained
Aosearchcols	Default NULL, similar to: [NULL, {"Ssearch": "My Filter"}, null,{"Ssearch": "^[0-9]", "Bescaperegex": false}]	Define its initialization search list attribute separately for each column (this piece is not yet understood)
Asstripclasses	default [' odd ', ' even '], such as [' Strip1 ', ' strip2 ', ' STRIP3 ']	Specifies the class style to be applied to each row, automatically looping
Bdestroy	True or FALSE, default false	Used to erase the previous data object when it is time to perform a new DataTable binding on the same element, swapping the new object settings
Bretrieve	True or FALSE, default false	Used to indicate whether a DataTable object is returned when a DataTable binding is performed
Bscrollcollapse	True or FALSE, default false	Specify the appropriate time to indent the scrolling view
Bsortcellstop	True or FALSE, default false	(Unknown stuff)
Icookieduration	Integer, default 7200, in seconds	Specifies the length of time that is used to store client information in a cookie, after which it expires automatically
Ideferloading	Integer, default is null	Lazy loading, whose parameters are the number of entries to be loaded, usually in conjunction with Bserverside,sajaxsource, etc.
Idisplaylength	Integer, default = 10	To specify the number of bars to display on a screen, turn on the paging device
Idisplaystart	Integer, default = 0	Used to specify from which data to start displaying to the table
Iscrollloadgap	Integer, default = 100	Lets you specify how many data can be displayed at most one screen when the DataTable is set to scroll
OSearch	Default {"Ssearch": "", "Bregex": false, "Bsmart": true}	The initial time of the specified search parameters related, a little complicated, not understand the current
Sajaxdataprop	String, default ' Aadata '	Specifies the name of the data item to use when fetching tabular data from the server
Sajaxsource	URL string, default null	Specify which URL to fetch data from
Scookieprefix	String, default ' Sprymedia_datatables_ '	Used to specify the prefix name of the string stored in the cookie when the state store attribute is opened
Sdom	Default Lfrtip (when Bjqueryui was false) or < "H" lfr>t< "F" ip> (when Bjqueryui is true)	This is a powerful attribute for defining a DataTable layout, and another special document to supplement the instructions.
Spaginationtype	' Full_numbers ' or ' Two_button ', default ' Two_button '	Used to specify the style of the page selector
Sscrollxinner	String Default ' disabled '	It's about horizontal scrolling, and I don't know what it means.

The DataTable supports the following callback functions

callback Function name	Parameters	return value	Default	Function
Fncookiecallback	1.string:name of the cookie defined by DataTables 2.object:data to being stored in the cookie 3.string:cookie expires Stri Ng 4.string:path of the cookie to set	String:cookie formatted string (which should be encoded by using encodeuricomponent ())	Null	This function call is triggered every time the cookie is changed
Fndrawcallback	No	No	No	Call after each table is draw, as for what to do, just look at it.
Fnfootercallback	1.node: "TR" element for the footer 2.array array strings:full table data (as derived from the original HTML) 3.int:i Ndex for the current display starting point in the display array< 4.int:index for the current display ending point in The display array 5.array int:index array to translate the visual position to the full data array	No	No	Used to modify the foot of the table at each redraw
Fnformatnumber	1.int:number to be formatted	string:formatted string for DataTables to show the number	Has the default	For large numbers, automatically add some commas, separating the
Fnheadercallback	1.node: "TR" element for the header 2.array array strings:full table data (as derived from the original HTML) 3.int:i Ndex for the current display starting point in the display array 4.int:index for the current display ending the Display array 5.array int:index array to translate the visual position to the full data array	No	No	Used to modify the header of a table each time the draw occurs
Fninfocallback	1.object:datatables Settings Object 2.int:starting position in data for the draw 3.int:end position in data for the DRA W 4.int:total number of rows in the table (regardless of filtering) 5.int:total number of rows in the data set, after fi Ltering 6.string:the String that DataTables have formatted using it s own rules	String:the string to is displayed in the information element.	No	Used to communicate table information
Fninitcomplete	1.object:osettings-datatables Settings Object	No	No	Called when table initialization is complete
Fnpredrawcallback	1.object:osettings-datatables Settings Object	Boolean	No	Used to call before starting to draw, return false to prevent the draw event from occurring, return other values, draw can execute smoothly
Fnrowcallback	1.node: "TR" element for the current row 2.array Strings:raw data array for this row (as derived from the original HTML 3.int:the Display index for the current table draw 4.int:the index of the data in the full list of rows (after Filte Ring	Node: "TR" element for the current row	No	Called when a row is created but not yet drawn to the screen, typically used to change the class style of a row
Fnserverdata	1.string:http source to obtain the data from (i.e. Sajaxsource) 2.array objects:a key/value pair object containing the D ATA to send to the server 3.function:function to being called on completion of the data get process that would draw the data On the page.	void	$.getjson	Used to replace the default send to service-side request operation
Fnstateloadcallback	1.object:osettings-datatables Settings Object 2.object:odata-object containing information retrieved from the State SA Ving Tsun cookie which should be restored. For the exact properties of refer to the DataTables code.	Boolean-false if the state should not being loaded, true otherwise	No	The data in the cookie is executed before it is loaded, and can be easily modified
Fnstatesavecallback	1.object:osettings-datatables Settings Object 2.string:svalue-a JSON String (without the final closing brace) which SH Ould is stored in the state saving cookie.	String-the full string that should is used to save the state	No	It is easy to do some pre-operation before the state data is stored in the cookie.

Effects of tables

Note that the red box represents four default settings, each of which is used to select the number of rows per page, the filter for the table, the table information, and the page change.

At this point, several default parameter settings are used. In DataTables, the prefix of the parameter name is used to describe the data type of the parameter, and it is obvious that B represents a Boolean type, I represents an integer type, and S represents a string type.

• Bpaginate: Whether paging, default to True, paging
• Idisplaylength: Number of rows per page, default number per page: 10
• Spaginationtype: Pagination style, supports two built-in methods, Two_button and Full_numbers, and uses Two_button by default.
• Blengthchange: Whether the user is allowed to select the number of rows per page after pagination by a drop-down list. The number of rows is 10,25,50,100. This setting requires Bpaginate support. The default is true.
• Bfilter: Enables or disables data filtering, which defaults to true. Note that if you use the filter feature, but want to turn off the default filter input box, you should use the Sdom
• Binfo: Allows or disables the display of table information, which by default is true to display information.

We can also change these settings by passing an initialization parameter object. For example, the following example sets the number of rows per page to 20 rows.

$ (function () {

$ ("#example"). DataTable (

{

Idisplaylength:20

}

);

});

DataTables API Chinese Manual

Original address: http://www.35ui.cn/post/20160416227.html

jquery DataTable Parameter API