一、啟用預設支援的工具欄

/*
* data-search 是否顯示搜尋框
* data-show-refresh 是否像是重新整理按鈕,注：重新整理操作會重新請求資料，並帶著請求引數
* data-show-toggle 是否顯示面板切換按鈕
* data-show-columns 是否顯示列控制按鈕
*/
$('#table1').bootstrapTable({
    columns: [
        { field: 'sno', title: '學生編號' },
        { field: 'sname', title: '學生姓名' },
        { field: 'ssex', title: '性別' },
        { field: 'sbirthday', title: '生日' },
        { field: 'class', title: '課程編號' },
    ],
    url:'@Url.Action("GetStudent","DataOne")'
});
 

<table id="table1"
       data-classes="table table-hover "
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"></table>

二、擴充套件工具欄使用

/*
* data-toolbar 用於指定id的div擴充套件工具欄，這種方式類似EaseUI中的datagird
* queryParams 請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數 如果 queryParamsType = 'limit' ,返回引數必須包含
                limit, offset, search, sort, order 否則, 需要包含:
                pageSize, pageNumber, searchText, sortName, sortOrder.
                返回false將會終止請求
*/
var $table1= $('#table1').bootstrapTable({
    columns: [
        { field: 'sno', title: '學生編號' },
        { field: 'sname', title: '學生姓名' },
        { field: 'ssex', title: '性別' },
        { field: 'sbirthday', title: '生日' },
        { field: 'class', title: '課程編號' },
    ],
    url: '@Url.Action("GetStudent","DataOne")',
    queryParams: function (params) {
        params.name = '張三丰';
        //特別說明，返回的引數的值為空，則當前引數不會發送到伺服器端
        params.sex = $('input[name="sex"]:checked').val();
        return params;
    }
});
//重新整理方法
$('#heartBtn').click(function () {
    ////重新整理處理，指定query 的引數，注：此地方指定的引數，僅在當次重新整理時使用
    //$table1.bootstrapTable('refresh', {
    //    query: {
    //        name: '張三'
    //    }
    //});
    $table1.bootstrapTable('refresh');
});
 

<table id="table1"
       data-classes="table table-hover "
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-toolbar="#toolbar"></table>
<div id="toolbar">
    <div class="btn-group">
        <button class="btn btn-default">
            <i class="glyphicon glyphicon-plus"></i>
        </button>
        <button class="btn btn-default">
            <i class="glyphicon glyphicon-heart" id="heartBtn"></i>
        </button>
        <button class="btn btn-default">
            <i class="glyphicon glyphicon-trash"></i>
        </button>
    </div>
    <div class="form-group">
        <label class="control-label">性別：</label>
        <label class="radio-inline">
            <input type="radio" name="sex" value="男" /> 男
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex" value="女" /> 女
        </label>
    </div>
</div>
 

更多：