Since I have been using datatables, I found this is a good table plug-in, but the good stuff is in English, so I combined my experience, let's make a simple translation of the English API on the official website. We also hope that you can share your experience with us so that we can better use datatables. This post will be updated continuously ......
Start with basic attributes.
Bautowidth:Enable or disable auto column width calculation.
Default Value |
True |
Type |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bautowidth": false // when disabled, the table will not automatically calculate the table size. When the browser is scaled down
- });
- });
CopyCode
Bdeferrender: According to the introduction on the official website, the translation is: Deferred rendering, there can be a speed improvement, when the datatable uses Ajax or JS source table data. This option is set to true, which causes the datatable to postpone the creation of each element of the table element until they are created. The purpose of this parameter is to save a lot of time.
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- VaR otable = $ ('# example'). datatable ({
- "Sajaxsource": "sources/arrays.txt ",
- "Bdeferrender": True // I have never used this parameter. Is it true? Please try it yourself.
- });
- });
Copy code
Bfilter
: This is easy to understand. enable or disable data filtering. The datatable filter is "intelligent", which allows users
Finally, multiple keywords are entered (separated by spaces) to match each row of data, even if they are not in the specified Order (this allows matching multiple columns ). Note: If you want to use filter
It must be set to true. To delete the default filter input box and retain the filter function, use {@ link datatable. defaults. sdom
}. The last sentence does not understand.
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bfilter": false
- });
- });
Copy code
Bjqueryui: Needless to say, you can understand it at a glance and enable the jquery UI style (you need to add the jquery style file on the page ).
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bjqueryui": True
- });
- });
Copy code
Blengthchange: Enable the drop-down menu for how many data entries are displayed on a page, allowing users to pull from the drop-down box (10, 25, 50, and 100). Note that pagination is required (bpaginate: true ).
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Blengthchange": false,
Copy code
Bpaginate: Enable the paging function. If not enabled, all pages will be displayed.
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bpaginate": false
- });
- });
Copy code
Bprocessing: Loading is displayed when Server Data Reading is enabled ...... It is better to enable this function, especially when the data volume is large.
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bprocessing": True
- });
- });
Copy code
Bscrollinfinite:Whether to enable a scroll bar with no length limit (used in combination with the sscrolly attribute). A scroll bar with no length limit means that the datatable will continuously load data when you drag the scroll bar.When the dataset is very large, it may be helpful. This option cannot be used with the paging option at the same time, and the paging option will be automatically disabled. Note that the recommended scroll bar will give priority to this option.
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bscrollinfinite": True,
- "Bscrollcollapse": True,
- "Sscrolly": "200px" // 200 pixels long
- });
- });
Copy code
Bserverside
: Enable the server mode and use the server side to process and configure the able. Note: The sajaxsource parameter must also be given to the datatableSource codeTo obtain the required
Data for each painting. This translation is awkward. After enabling this mode, you can perform operations on datatables
The number of records, next page, Previous Page, sorting (header), and search displayed on each page will be sent to the server.
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bserverside": True,
- "Sajaxsource": "xhr. php"
- });
- });
Copy code
Binfo: Enables or disables table information display. This shows the information about the data, which is currently on the webpage, including information filtering data, if the behavior is executed. This parameter is required after bserverside configuration.
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Binfo": false // if this parameter is not used in the background, an error is reported on the server page. It is said that this parameter contains all information about the table.
- });
- });
Copy code
Bsort: Enable the sorting function. Each column has the sorting function. If it is disabled, the sorting function will be invalid. You can also customize the sorting function. You can disable the "bsortable" option for sorting a single column.
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bsort": false
- });
- });
Copy code
Bsortclasses:Whether to add sorting_1, sorting_2, and sorting_3 classes to the column to be sorted. When this column is sorted, you can change its background color,This option will increase the execution time (when the class is removed and added) as a back-and-forth switching attribute ),You may want to disable this option when sorting large datasets.
Default Value: |
True |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bsortclasses": false
- });
- });
Copy code
Bstatesave:Whether to enable status saving. When the option is enabled, a cookie is used to save the status of the information displayed in the table, such as paging information, display length, filtering, and sorting.In this way, when the end user reloads the page, the previous settings can be used.
Default Value: |
False |
Type: |
Boolean |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Bstatesave": True
- });
- });
Copy code
Sscrollx:Whether to enable horizontal scrolling. You can enable this option when a table is too wide to be placed in a layout, or when the table has too many columns.To display a table in a horizontally scrolling view, this attribute can be set by CSS or a number (used as a pixel measure)
Default Value: |
Blank string-I. e. Disabled |
Type: |
String |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Sscrollx": "100% ",
- "Bscrollcollapse": True
- });
- });
Copy code
Sscrolly:Whether to enable vertical scrolling. Vertical scrolling will drive the datatable to be set to a given length. Any data that overflows beyond the current view can be viewed through vertical scrolling.When a large amount of data is displayed in a small area, you can select a method in paging and vertical scrolling. This attribute can be set by CSS or a number (used as a pixel measure)
Default Value: |
Blank string-I. e. Disabled |
Type: |
String |
- $ (Document). Ready (function (){
- $ ('# Example'). datatable ({
- "Sscrolly": "200px ",
- "Bpaginate": false
- });
- });
Copy code
This section is complete. We recommend that you use Ctrl + F for search.
Favorite for query: original address: http://bbs.sailit.cn/forum.php? MoD = viewthread & tid = 21