Bootstrap Table (2), bootstraptable

Bootstrap Table (2), bootstraptable

Related reading:

Bootstrap Table use organization (1) http://www.bkjia.com/article/115789.htm

Bootstrap Table use organization (3) http://www.bkjia.com/article/115795.htm

Bootstrap Table use organization (4) toolbar http://www.bkjia.com/article/115798.htm

Bootstrap Table query http://www.bkjia.com/article/115785.htm using a composite paging (5)

1. Modify the row style

<Table id = "table1" data-row-style = "rowStyle"> </table>/** data-row-style extension method for processing row styles */$ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number'}, {field: 'sname', title: 'student name'}, {field: 'ssex, title: 'gender'}, {field: 'sbirthday', title: 'birthday'}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne") '});/***** @ param row current row data object * @ param index current row index * /Function rowStyle (row, index) {var classes = ['active', 'success', 'info', 'warning', 'danger ']; if (row. sno. indexOf ('2 ')! =-1) {return {classes: ['success']} return {};}

Ii. Cell style definition and alignment Definition

/** Data-cell-style Extension Method Processing cell style * data-align sets the alignment of the current column, including setting the table title alignment in the header * data-halign, the priority is higher than align */$ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number', align: 'center', halign: 'right', cellStyle: function (value, row, index) {// The current column. if (index % 2 = 0) return {classes: 'success '}; return {}}, {field: 'sname', title: 'student name'}, {field: 'ssex, title: 'gender '}, {field: 'sbirthday', title: 'birthday '}, {field: 'class', title: 'Course number'},], url: '@ Url. action ("GetStudent", "DataOne ")'});

Iii. Sorting column Definition

/** Data-sortable: sets whether the current column can be sorted, by default, the currently displayed content is sorted * data-sort-name, and the default sorting column name * data-sort- order sets the default sorting method. asc/desc * data-sorter can customize the extended sorting method */ $ ('# table1 '). bootstrapTable ({columns: [{field: 'sno', title: 'student number ', sortable: true}, {field: 'sname', title: 'student name ', sortable: true}, {field: 'ssex, title: Gender, sortable: true}, {field: 'sbirthday', title: 'birthday', sortable: true}, {field: 'class', title: 'Course number', sortable: true},], url: '@ Url. action ("GetStudent", "DataOne ")'}); <table id = "table1" data-classes = "table-hover table-condensed" data-sort-name = "sno" data-sort-order = "desc"> </table>

The above section describes how to use Bootstrap Table (2). I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!