Bootstrap Table Table Parameters detailed

Source: Internet
Author: User
Tags json
Table Parameters
name label type default Description
- Data-toggle String ' Table ' Enable the table directly without writing JavaScript.
Classes Data-classes String ' Table Table-hover ' The class name of the table. By default, the table has a border, and you can add ' table-no-bordered ' to remove the border style from the table.
Sortclass Data-sort-class String Undefined The class name of the TD elements which is sorted.
Height Data-height Number Undefined Defines the height of the table.
Undefinedtext Data-undefined-text String '-' The character that is displayed when the data is undefined
Striped data-striped Boolean False Set to True to have an interlaced color effect
Sortname Data-sort-name String Undefined Define the row sequence, get the data fill in the field name by URL, otherwise fill in the subscript
SortOrder Data-sort-order String ' ASC ' Define sort by ' ASC ' or ' desc '
Sortstable Data-sort-stable Boolean False Set to True to get a stable sort, we will add the _position property to the row data.
Iconsprefix Data-icons-prefix String ' Glyphicon ' Define font libraries (' glyphicon ' or ' FA ' for fontawesome), reference fontawesome when using "FA", and implement effects with icons attributes
Glyphicon integrated with Bootstrap for free reference: http://glyphicons.com/
Fontawesome Reference: http://fortawesome.github.io/
Icons Data-icons Object {
Paginationswitchdown: ' Glyphicon-collapse-down icon-chevron-down ',
Paginationswitchup: ' glyphicon-collapse-up icon-chevron-up ',
Refresh: ' Glyphicon-refresh Icon-refresh '
Toggle: ' Glyphicon-list-alt icon-list-alt '
Columns: ' glyphicon-th icon-th '
Detailopen: ' Glyphicon-plus icon-plus '
Detailclose: ' Glyphicon-minus icon-minus '
}
Custom icons
Columns - Array [] Column configuration items, see the Column Parameters table for details.
Data - Array [] Loading data in JSON format
Ajax Data-ajax Function Undefined Custom Ajax methods that implement the JQuery Ajax API
Method Data-method String ' Get ' How the server data is requested ' get ' or ' post '
Url Data-url String Undefined Load address of server data
Cache Data-cache Boolean True Set to True to disable AJAX data caching
ContentType Data-content-type String ' Application/json ' Type of data encoding to be sent to the server
DataType Data-data-type String ' JSON ' Data types returned by the server
Ajaxoptions Data-ajax-options Object {} Additional parameters when submitting an AJAX request, see Http://api.jquery.com/jQuery.ajax for the available parameter columns.
Queryparams Data-query-params Function function (params) {
return params;
}
When requesting server data, you can add some additional parameters by overriding the parameters, such as parameters in toolbar if Queryparamstype = ' limit ', the return parameter must contain
Limit, offset, search, sort, order otherwise, you need to include:
PageSize, PageNumber, SearchText, Sortname, SortOrder.
Returning false will terminate the request
Queryparamstype Data-query-params-type String ' Limit ' Set to ' limit ' to send parameters that conform to the RESTFul format.
ResponseHandler Data-response-handler Function Function (res) {
return res;
}
A handler before the server data is loaded, which can be used to format the data.
Parameter: RES is the data requested from the server.
Pagination Data-pagination Boolean False Set to True to display the pagination bar at the bottom of the table
Paginationloop Data-pagination-loop Boolean True Set to True to enable the function of the paging bar infinite Loop.
Onlyinfopagination Data-only-info-pagination Boolean False Set to True to display only the total number of data without displaying the paging button. Requires pagination= ' True '
Sidepagination Data-side-pagination String ' Client ' Set where to page, and the optional value is ' client ' or ' server '. When setting up ' server ', you must set the server data address (URL) or override the Ajax method
PageNumber Data-page-number Number 1 If paging is set, the first page number
PageSize Data-page-size Number 10 If paging is set, the number of page data bars
PageList Data-page-list Array [Ten, +, +, all] Sets the number of page data bars to select if paging is set. Set to all to display all records.
Selectitemname Data-select-item-name String ' Btselectitem ' Field name of the radio or checkbox
Smartdisplay Data-smart-display Boolean True True to display pagination or card view smartly.
Escape Data-escape Boolean False Escape HTML string, replace &, <,;, ", ', and ' character.
Search Data-search Boolean False Whether to enable the search box
Searchonenterkey Data-search-on-enter-key Boolean False When set to True, press ENTER to trigger the search method, or the search method is triggered automatically
Strictsearch Data-strict-search Boolean False Set to True to enable full-match search, otherwise fuzzy search
SearchText Data-search-text String '' Initialize search text
Searchtimeout Data-search-time-out Number 500 Set the search time-out period
Trimonsearch Data-trim-on-search Boolean True Set to True to allow null character search
Showheader Data-show-header Boolean True Whether to display column headers
Showfooter Data-show-footer Boolean False Whether to show column pins
Showcolumns Data-show-columns Boolean False Whether to display the Content column drop-down box
Showrefresh Data-show-refresh Boolean False Whether to display the refresh button
Showtoggle Data-show-toggle Boolean False Whether to display the toggle attempt (table/card) button
Showpaginationswitch Data-show-pagination-switch Boolean False Whether to display the number of data bars selection box
Minimumcountcolumns Data-minimum-count-columns Number 1 When the number of columns is less than this value, the Content Column drop-down box is hidden.
IDfield Data-id-field String Undefined Specifying PRIMARY key columns
UniqueId Data-unique-id String Undefined Indicate a unique identifier for each row.
CardView Data-card-view Boolean False Set to True to display the card view for mobile devices. Otherwise table attempt, applies to PC
DetailView Data-detail-view Boolean False Set to True to display verbose page mode.
Detailformatter Data-detail-formatter Function function (index, row) {
Return ';
}
Format a view of the detailed page pattern.
Searchalign Data-search-align String ' Right ' Specifies the horizontal orientation of the search box. ' Left ' or ' right '
Buttonsalign Data-buttons-align String ' Right ' Specifies the position of the horizontal direction of the button. ' Left ' or ' right '
Toolbaralign Data-toolbar-align String ' Left ' Specifies the position of the toolbar horizontal direction. ' Left ' or ' right '
Paginationvalign Data-pagination-v-align String ' Bottom ' Specifies the position of the page bar in the vertical direction. ' Top ' or ' bottom ' or ' bonth '
Paginationhalign Data-pagination-h-align String ' Right ' Specifies the position of the page bar in the horizontal direction. ' Left ' or ' right '
Paginationdetailhalign Data-pagination-detail-h-align String ' Left ' Specifies the position of the paging detail in the horizontal direction. ' Left ' or ' right '
Paginationpretext Data-pagination-pre-text String ' < ' Specify the icon or text for the previous page button in a page bar
Paginationnexttext Data-pagination-next-text String ' > ' Specify the icon or text for the next-page button in the pagination bar
Clicktoselect Data-click-to-select Boolean False Set true to automatically select the Rediobox and checkbox when the row is clicked
Singleselect Data-single-select Boolean False Set true to prevent multiple selections
Toolbar Data-toolbar String Undefined A jquery selector that indicates the custom toolbar for example:
#toolbar,. toolbar.
Checkboxheader Data-checkbox-header Boolean True Set false to hide the Check-all checkbox in the column header.
maintainselected data-maintain-selected Boolean False Set to True to remember the checkbox's selection when you click the paging button or the search button
Sortable Data-sortable Boolean True Set to False to prohibit sorting of all columns
Silentsort Data-silent-sort Boolean True Set to False to automatically remember sort items when you click the paging button. Effective only when sidepagination is set to server.
RowStyle Data-row-style Function function (Row,index) {
return class;
}
The custom row style parameters are:
Row: Line data
Index: Row subscript
The return value can be either class or CSS
Rowattributes Data-row-attributes Function function (Row,index) {
return attributes;
}
The custom row property parameters are:
Row: Line data
Index: Row subscript
Return value can support all custom attributes for class or CSS
Customsearch Data-custom-search Function $.noop The custom search function is executed instead of built-in search function, takes one parameters:
Text:the search text.
Example usage:

function Customsearch (text) {//search logic.//you must use ' this.data ' array in order to filter the data. NO use ' This.options.data '. }
Customsort Data-custom-sort Function $.noop The custom sort function is executed instead of built-in sort function, takes and parameters:
Sortname:the sort name.
Sortorder:the sort order.
Example usage:

function Customsort (sortname, SortOrder) {//sort logic here.//you must use ' this.data ' array in order to Sort the data. NO use ' This.options.data '. }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.