Transfer datatables Chinese api--basic parameters

Since I have been using DataTables, found that this is a very good form plug-in, but the good things are in English, so I combined with their own experience, the English API of the official website to do a simple translation, but also hope that the use of their own experience to share together, Let us better use DataTables, this post will be continuously updated ...
Start with the basic properties.
bautowidth : Enables or disables the calculation of automatic column widths.

Default value	True
Type	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bautowidth": false//off, the table will not automatically calculate the size of the table, when the browser is small, will be squeezed in a lump
4. } );
5. } );

Copy Code

Bdeferrender : According to the official website of the translation is, deferred rendering, can have a speed of ascension, when the DataTable using Ajax or JS source table data. Setting this option to true causes the DataTable to defer creating each element of the table element until they are all created-the purpose of this parameter is to save a lot of time.

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. var otable = $ (' #example '). DataTable ({
3. "Sajaxsource": "Sources/arrays.txt",
4. "Bdeferrender": TRUE//This parameter I personally did not use, in the end is not the effect, we have to try
5. } );
6. } );

Copy Code

Bfilter : This is easy to understand, enabling or disabling filtering data. The DataTable filter is "smart", which allows the user to eventually enter multiple keywords (space delimited), and match each row of data, even if not in the order specified (this allows matching of multiple columns). Note that if you want to use filtering, you must set true in the DataTable, and if you want to delete the default filter input box and retention filtering, use {@link DataTable.defaults.sDom}. This last sentence does not understand, do not know how people understand.

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bfilter": false
4. } );
5. } );

Copy Code

Bjqueryui : This doesn't have to be said, you know, enable jquery UI style, (need to add jquery style files on the page).

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bjqueryui": True
4. } );
5. } );

Copy Code

Blengthchange : Turn on a page to show how many data drop-down menus allow users to drop-down boxes (10, 25, 50, and 100), noting that paging (bpaginate:true) is required.

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Blengthchange": false,

Copy Code

bpaginate : Turn on paging function, if not open, will show all

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bpaginate": false
4. } );
5. } );

Copy Code

bprocessing : Display loading while reading server data ... Especially when it comes to large data volumes, it's better to turn on this feature

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bprocessing": True
4. } );
5. } );

Copy Code

bscrollinfinite : Whether to turn on the unlimited length scroll bar (used in conjunction with the Sscrolly property), the unrestricted-length scroll bar means that the DataTable will constantly load data when the user drags the scroll bar, which is useful when the dataset is very large. , the option cannot be used in conjunction with the paging option, the paging option is automatically suppressed, and the extra recommended scroll bar will take precedence over the option

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bscrollinfinite": true,
4. "Bscrollcollapse": true,
5. "sscrolly": "200px"//length 200 pixels
6. } );
7. } );

Copy Code

bserverside : Turn on server mode and configure the DataTable using server-side processing. Note: The Sajaxsource parameter must also be given in order to give the DataTable source code to fetch the required data for each painting. This translation is a bit awkward. When this mode is turned on, you will see how many records, next page, previous page, sort (header), and search for each action on DataTables each page, which are passed to the server's corresponding values.

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bserverside": true,
4. "Sajaxsource": "xhr.php"
5. } );
6. } );

Copy Code

binfo : Enables or disables the display of table information. This shows information about the data that is currently on the Web page, including information filtering data, if the behavior is performed. This parameter needs to be used after the Bserverside configuration.

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Binfo": false//If this parameter is not in the background, the server paging will be an error, it is said that this parameter contains all the information of the table
4. } );
5. } );

Copy Code

bsort : Turn on the sorting function, each column has the sorting function, if the turn off, the sorting function will be invalid, also can customize the sorting function. Sorting of individual columns can disable the bsortable option.

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bsort": false
4. } );
5. } );

Copy Code

bsortclasses : Whether to add an extra Sorting_1,sorting_2,sorting_3 three class on the currently sorted column, and when the column is sorted, you can toggle its background color. This option, as a property that switches back and forth, increases the execution time (when class is removed and added), and you might want to turn off the option when sorting large datasets

Default value:	True
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bsortclasses": false
4. } );
5. } );

Copy Code

Bstatesave : Whether the state is on or off, the selected item will be opened with a cookie to hold the status of the information displayed in the table, such as paging information, display length, filtering and sorting. This allows the end user to reload the page using the previous settings

Default value:	False
Type:	Boolean

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Bstatesave": True
4. } );
5. } );

Copy Code

sscrollx : Whether to turn on horizontal scrolling, when a table is too wide to fit in a layout, or if there are too many columns in the table, you can turn on the option to show the table in a scrollable view, which can be a CSS setting, or a number (used as a pixel metric)

Default value:	Blank string-i.e. Disabled
Type:	String

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "Sscrollx": "100%",
4. "Bscrollcollapse": True
5. } );
6. } );

Copy Code

sscrolly: If vertical scrolling is turned on, vertical scrolling will drive the DataTable to the given length, and any data that overflows beyond the current view can be viewed vertically by scrolling. When large amounts of data are displayed in a small area, You can choose between paging and vertical scrolling, which can be a CSS setting, or a number (used as a pixel metric)

Default value:	Blank string-i.e. Disabled
Type:	String

1. $ (document). Ready (function () {
2. $ (' #example '). DataTable ({
3. "sscrolly": "200px",
4. "Bpaginate": false
5. } );
6. } );

Copy Code

This section is complete and recommended for use with Ctrl+f

Transfer datatables Chinese api--basic parameters