This article shares the operation code of bootstrap Table for your reference. The specific content is as follows
function HQCreatTable(ob) {
var option = {
cache: false,//Does it use cache, the default is true, so in general, this property needs to be set (*) scrollX: true,
scrollY:true,
striped: true, //Make the table with stripes //Does the line interval color be displayed sidePagination: "client",//Pagination method: client client pagination, server server pagination (*) pagination: true, //Show the paging toolbar at the bottom of the table pageNumber: 1, //Initialize the first page to load, default the first page pageSize: 10,
pageList: [ 10,15],//The number of lines per page to choose from (*) showColumns: false,// Whether to display all columns sortable: true, // Whether to enable sorting
clickToSelect: true,// Whether to enable click to select line showRefresh: false, //Show refresh button //search: false,//whether the search box in the upper right corner is displayed //toolbar: '#toolbar', //What container does the tool button use uniqueId: "ID", //The unique identifier of each row is generally the primary key column undefinedText: "",
toolbarAlign: 'left',
exportDataType: "all", //basic', 'all', 'selected'.
}
if () {
= ;//Line style is a function }
//Sort if () {
= ;
} else {
= "desc";
}
if () {
= ;
}
if () {
= ;//Export Excel }
if () {
= ;// Whether to display the statistics footer }
if () {
= ;
}
if () {
= ;//The number of records per page (*) }
if () {
= ;
} else {
= [];
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if () {
= ;
}
if ( || == false) {
=
} else {
= true;// Multiple selection is prohibited }
if () {
= ;
} else {
= false;//Set to true When clicking the paging button or search button, the checkbox selection will be remembered }
if () { = ; }
if () {
= ;
}
if () {
= ;
}
$().bootstrapTable('destroy');
$().bootstrapTable(option);
if () {
$().bootstrapTable('load', );
}
}
Table configuration function for front-end pagination
<table data-row-style="rowStyle"></table>
//The row changes color according to the data function rowStyle(row, index) {
var classes = ['success'];
var classes1 = ['danger'];
var classes2 = ['warning'];
if (row.bed_msg==0) {
return {
classes: classes2
};
}else{
if ( == 1) {
return {
classes: classes1
};
} else {
return {
classes: classes
};
}
}
}
Change the background color of the row based on the value of a field in each row of data (class seems to be able to call the ones it originally defaulted, but I forgot if it is like this if I wrote it a long time ago)
formatter: function (value, row, index) {
// According to row.column name, the status is determined to return true/false if ( == 1) {
return {
disabled: true
};
}
}
This is to disable the selection box based on the value of a field in each row of data (I needed to do settlement in the previous project, and the settled and the unsettled ones are together, so I need this). Formatter can also write other functions, such as changing the value of 1 and 0 to its corresponding value
footerFormatter: function (data) {
return (function (sum, row) {
return accAdd(sum, row["Selmoney"]);
}, 0) + "Yuan";
}
footerFormatter must be configured before the showFooter property is true, otherwise it will not be displayed. If I write this, it is the sum of the Selmoney values of all data in Table, and if I write this, it is the sum of the data of the page.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.