文章目录
- 1. 客户端分页和服务端分页
- 2. 表分页
- 3. 响应处理程序
- 4. clickToSelect
- 5. columns
- 6. contentType
- 7. dataField
- 8. dataType
- 9. detailView
- 10. detailFormatter
- 11. escape
- 12. footerField
- 13. footerStyle
- 14. headerStyle
- 15. height
- 16. idField
- 17. selectItemName
- 18. ignoreClickToSelectOn
- 19. loadingFontSize
- 20. locale
- 21. method
- 22. minimumCountColumns
- 23. 多行选择
- 24. 每页显示数量
- 25. pageNumber
- 26. pageSize
- 27. paginationLoop
- 28. paginationVAlign
- 29. queryParams
- 30. queryParamsType
- 31. rememberOrder
- 32. rowAttributes
- 33. rowStyle
- 34. searchAccentNeutralise
- 35. showColumns
- 36. showColumnsSearch
- 37. showColumnsSearch
- 38. showFullscreen
- 39. showPaginationSwitch
- 40. showRefresh
- 41. showToggle
- 42. singleSelect
- 43. toolbar
1. 客户端分页和服务端分页
sidePagination
- 属性:
data-side-pagination
- 类型:
String
- 细节:
定义表的侧面分页,只能是 ‘client’ 或'server'
。使用'server'
端需要设置'url'
或'ajax'
选项。
请注意,所需的服务器响应格式不同,具体取决于'sidePagination'
选项设置为'client'
还是'server'
。请参见以下示例:
使用客户端分页
使用服务端分页 - 默认:
'client'
- 例子: 客户端分页和服务器端分页
2. 表分页
pagination
- 属性:
data-pagination
- 类型:
Boolean
- 细节:
设置为true
可在表格底部显示分页工具栏。 - 默认:
false
- 例子: 表分页
3. 响应处理程序
responseHandler
- 属性:
data-response-handler
- 类型:
Function
- 细节:
在加载远程数据之前,处理程序响应数据格式,参数对象包含:
res: 响应数据。
jqXHR: jqXHR对象,它是XMLHTTPRequest对象的超集。有关更多信息,请参阅jqXHR类型。 - 默认:
function(res) { return res }
- 例子: 响应处理程序
4. clickToSelect
Attribute: data-click-to-select
Type: Boolean
Detail:
Set true to select checkbox or radiobox when clicking rows.
Default: false
Example: Click To Select
5. columns
Attribute: -
Type: Array
Detail:
The table columns config object, see column properties for more details.
Default: []
Example: Table Columns
6. contentType
Attribute: data-content-type
Type: String
Detail:
The contentType of request remote data, for example: application/x-www-form-urlencoded.
Default: ‘application/json’
Example: Content Type
7. dataField
Attribute: data-data-field
Type: String
Detail:
Key in incoming json containing ‘rows’ data list.
Default: ‘rows’
Example: Total/Data Field
8. dataType
Attribute: data-data-type
Type: String
Detail:
The type of data that you are expecting back from the server.
Default: ‘json’
Example: Data Type
9. detailView
Attribute: data-detail-view
Type: Boolean
Detail:
Set true to show detail view table.
Default: false
Example: Detail View
10. detailFormatter
Attribute: data-detail-formatter
Type: Function
Detail:
Format your detail view when detailView is set to true. Return a String and it will be appended into the detail view cell, optionally render the element directly using the third parameter which is a jQuery element of the target cell.
Default: function(index, row, element) { return ‘’ }
Example: Detail View
11. escape
Attribute: data-escape
Type: Boolean
Detail:
Escapes a string for insertion into HTML, replacing &, <, >, “, `, and ‘ characters.
Default: false
Example: Table Escape
12. footerField
Attribute: data-footer-field
Type: String
Detail:
Defines the key of the footer Object (From data array or server response json). The footer Object can be used to set/define footer colspans and/or the value of the footer.
Copy
{
“rows”: [
{
“id”: 0,
“name”: “Item 0”,
“price”: “$0”,
“amount”: 3
}
],
“footer”: {
“id”: “footer id”,
“_id_colspan”: 2,
“name”: “footer name”
}
}
Default: footerField
Example: Footer Field
13. footerStyle
Attribute: data-footer-style
Type: Function
Detail:
The footer style formatter function, takes one parameter:
column: the column object.
Support classes or css. Example usage:
function footerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
}
Default: {}
Example: Footer Style
14. headerStyle
Attribute: data-header-style
Type: Function
Detail:
The header style formatter function, takes one parameter:
column: the column object.
Support classes or css. Example usage:
function headerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
}
Default: {}
Example: Header Style
15. height
Attribute: data-height
Type: Number
Detail:
The height of table, enable fixed header of table.
Default: undefined
Example: Table Height
16. idField
Attribute: data-id-field
Type: String
Detail:
Indicate which field will be used as checkbox/radiobox value, its the counterpart to selectItemName.
Default: undefined
Example: Id Field
17. selectItemName
Attribute: data-select-item-name
Type: String
Detail:
The name of radio or checkbox input.
Default: ‘btSelectItem’
Example: Id Field
18. ignoreClickToSelectOn
Attribute: data-ignore-click-to-select-on
Type: Function
Detail:
Set the ignore elements clickToSelect on. Takes one parameter:
element: the element clicked on.
Return true if the click should be ignored, false if the click should cause the row to be selected. This option is only relevant if clickToSelect is true.
Default: { return [‘A’, ‘BUTTON’].includes(tagName) }
Example: Ignore Click To Select On
19. loadingFontSize
Attribute: data-loading-font-size
Type: String
Detail:
To define the font size of the loading text, the default value is ‘auto’, it will be calculated automatically according to the table width, between 12px and 32px.
Default: ‘auto’
Example: Loading Font Size
20. locale
Attribute: data-locale
Type: String
Detail:
Sets the locale to use (i.e. ‘zh-CN’). Locale files must be pre-loaded. Allows for fallback locales, if loaded, in the following order:
First tries for the locale as specified,
Then tries the locale with ‘_’ translated to ‘-‘ and the region code upper cased,
Then tries the short locale code (i.e. ‘zh’ instead of ‘zh-CN’),
And finally will use the last locale file loaded (or the default locale if no locales loaded).
If left undefined or an empty string, use the last locale loaded (or ‘en-US’ if no locale files loaded).
Default: undefined
Example: Table Locale
21. method
Attribute: data-method
Type: String
Detail:
The method type to request remote data.
Default: ‘get’
Example: Table Method
22. minimumCountColumns
Attribute: data-minimum-count-columns
Type: Number
Detail:
The minimum number of columns to hide from the columns drop down list.
Default: 1
Example: Minimum Count Columns
23. 多行选择
multipleSelectRow
Attribute: data-multiple-select-row
Type: Boolean
Detail:
Set true to enable the multiple selection row. Can use the ctrl+click to select one row or use shift+click to select a range of rows.
Default: false
Example: Multiple Select Row
24. 每页显示数量
pageList
Attribute: data-page-list
Type: Array
Detail:
When set pagination property, initialize the page size selecting list. If you include the ‘all’ or ‘unlimited’ option, all the records will be shown in your table.
Hint: If the table has lesser rows as the option(s), the options will be hidden automatically, to disable that feature you can set smartDisplay to false
Default: [10, 25, 50, 100]
Example: Page List
25. pageNumber
Attribute: data-page-number
Type: Number
Detail:
When set pagination property, initialize the page number.
Default: 1
Example: Page Number
26. pageSize
Attribute: data-page-size
Type: Number
Detail:
When set pagination property, initialize the page size.
Default: 10
Example: Page Size
27. paginationLoop
Attribute: data-pagination-loop
Type: Boolean
Detail:
Set true to enable pagination continuous loop mode.
Default: true
Example: Pagination Loop
28. paginationVAlign
Attribute: data-pagination-v-align
Type: String
Detail:
Indicate how to vertical align the pagination. ‘top’, ‘bottom’, ‘both’ (put the pagination on top and bottom) can be used.
Default: ‘bottom’
Example: Pagination V Align
29. queryParams
Attribute: data-query-params
Type: Function
Detail:
When requesting remote data, you can send additional parameters by modifying queryParams.
If queryParamsType = ‘limit’, the params object contains: limit, offset, search, sort, order.
Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder.
Return false to stop request.
Default: function(params) { return params }
Example: Query Params
30. queryParamsType
Attribute: data-query-params-type
Type: String
Detail:
Set ‘limit’ to send query params with RESTFul type.
Default: ‘limit’
Example: Query Params Type
31. rememberOrder
Attribute: data-remember-order
Type: Boolean
Detail:
Set true to remember the order for each column.
Default: false
Example: Remember Order
32. rowAttributes
Attribute: data-row-attributes
Type: Function
Detail:
The row attribute formatter function, takes two parameters:
row: the row record data.
index: the row index.
Support all custom attributes.
Default: {}
Example: Row Attributes
33. rowStyle
Attribute: data-row-style
Type: Function
Detail:
The row style formatter function, takes two parameters:
row: the row record data.
index: the row index.
Support classes or css.
Default: {}
Example: Row Style
34. searchAccentNeutralise
Attribute: data-search-accent-neutralise
Type: Boolean
Detail:
Set to true if you want to use accent neutralise feature.
Default: false
Example: Search Accent Neutralise
35. showColumns
Attribute: data-show-columns
Type: Boolean
Detail:
Set true to show the columns drop down list. We can set the switchable column option to false to hide the columns item in the drop down list.
Default: false
Example: Basic Columns and Large Columns
36. showColumnsSearch
Attribute: data-show-columns-search
Type: Boolean
Detail:
Set true to show a search for the columns filter.
Default: false
Example: Columns Search
37. showColumnsSearch
Attribute: data-show-columns-search
Type: Boolean
Detail:
Set true to show a search for the columns filter.
Default: false
Example: Columns Search
38. showFullscreen
Attribute: data-show-fullscreen
Type: Boolean
Detail:
Set true to show the fullscreen button.
Default: false
Example: Show Fullscreen
39. showPaginationSwitch
Attribute: data-show-pagination-switch
Type: Boolean
Detail:
Set true to show the pagination switch button.
Default: false
Example: Show Pagination Switch
40. showRefresh
Attribute: data-show-refresh
Type: Boolean
Detail:
Set true to show the refresh button.
Default: false
Example: Show Refresh
41. showToggle
Attribute: data-show-toggle
Type: Boolean
Detail:
Set true to show the toggle button to toggle table / card view.
Default: false
Example: Show Toggle
42. singleSelect
Attribute: data-single-select
Type: Boolean
Detail:
Set true to allow checkbox selecting only one row.
Default: false
Example: Single Select
43. toolbar
Attribute: data-toolbar
Type: String/Node
Detail:
A jQuery selector that indicates the toolbar, for example: #toolbar, .toolbar, or a DOM node.
Default: undefined
Example: Custom Toolbar