一、行樣式修改

<table id="table1"
       data-row-style="rowStyle"></table>

/*
* data-row-style 擴充套件方法處理 行樣式
*/
$('#table1').bootstrapTable({
    columns: [
        { field: 'sno', title: '學生編號' },
        { field: 'sname', title: '學生姓名' },
        { field: 'ssex', title: '性別' },
        { field: 'sbirthday', title: '生日' },
        { field: 'class', title: '課程編號' },
    ],
    url:'@Url.Action("GetStudent","DataOne")'
});
/**
    * 
    * @@param row  當前行資料物件
    * @@param index 當前行索引
    */
function rowStyle(row, index) {
    var classes = ['active', 'success', 'info', 'warning', 'danger'];
    if (row.sno.indexOf('2') != -1) {
        return {
            classes:['success']
        }
    }
    return {};
}
 

/*
* data-cell-style 擴充套件方法處理 單元格樣式
* data-align 設定當前列的對齊方式，包括表頭
* data-halign 設定表格標題的對齊方式，優先順序大於 align
*/
$('#table1').bootstrapTable({
    columns: [
        {
            field: 'sno', title: '學生編號',
            align: 'center',
            halign:'right',
            cellStyle: function (value, row, index) {
                //當前列，奇數單元格顯示綠色
                if (index%2==0)
                    return {
                        classes: 'success'
                    };

                return {};
            }
        },
        { field: 'sname', title: '學生姓名' },
        { field: 'ssex', title: '性別' },
        { field: 'sbirthday', title: '生日' },
        { field: 'class', title: '課程編號' },
    ],
    url:'@Url.Action("GetStudent","DataOne")'
});
 

三、排序列定義

/*
* data-sortable 設定當前列是否可排序，預設當前顯示內容排序
* data-sort-name 設定預設排序列名
* data-sort-order 設定預設排序方式 asc/desc
* data-sorter 可以自定義擴充套件排序方法
*/
$('#table1').bootstrapTable({
    columns: [
        { field: 'sno', title: '學生編號', sortable: true },
        { field: 'sname', title: '學生姓名', sortable: true},
        { field: 'ssex', title: '性別', sortable: true },
        { field: 'sbirthday', title: '生日', sortable: true},
        { field: 'class', title: '課程編號', sortable: true},
    ],
    url:'@Url.Action("GetStudent","DataOne")'
});
 

<table id="table1"
       data-classes="table table-hover table-condensed"
       data-sort-name="sno"
       data-sort-order="desc"></table>