CSS
將樣式表複製粘貼<link>到您<head>之前的所有其他樣式表中以加載我們的CSS。
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
JS
將以下<script>放在頁面末尾附近，在結束</body>標記之前，以啓用它們。首先是jQuery，然後是Bootstrap.js，然後是我們的JavaScript插件。
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
$('#test-table').bootstrapTable({
//請求方法
method: 'get',
//是否顯示行間隔色
striped: true,
//是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
cache: false,
//是否顯示分頁（*）
pagination: true,
//是否啓用排序
sortable: false,
//排序方式
sortOrder: "asc",
//初始化加載第一頁，默認第一頁
//我設置了這一項，但是貌似沒起作用，而且我這默認是0,- -
//pageNumber:1,
//每頁的記錄行數（*）
pageSize: 10,
//可供選擇的每頁的行數（*）
pageList: [10, 25, 50, 100],
//這個接口需要處理bootstrap table傳遞的固定參數,並返回特定格式的json數據
url: "/test/testtable.action",
//默認值爲 'limit',傳給服務端的參數爲：limit, offset, search, sort, order Else
//queryParamsType:'',
////查詢參數,每次調用是會帶上這個參數，可自定義
queryParams: queryParams : function(params) {
var subcompany = $('#subcompany option:selected').val();
var name = $('#name').val();
return {
pageNumber: params.offset+1,
pageSize: params.limit,
companyId:subcompany,
name:name
};
},
//分頁方式：client客戶端分頁，server服務端分頁（*）
sidePagination: "client",
//是否顯示搜索
search: false,
//Enable the strict search.
strictSearch: true,
//Indicate which field is an identity field.
idField : "id",
columns: [{
field: 'id',
title: 'id',
align: 'center'
}, {
field: 'testkey',
title: '測試標識',
align: 'center'
}, {
field: 'testname',
title: '測試名字',
align: 'center'
},{
field: 'id',
title: '操作',
align: 'center',
formatter:function(value,row,index){
//通過formatter可以自定義列顯示的內容
//value：當前field的值，即id
//row：當前行的數據
var a = '<a href="" >測試</a>';
}
}],
pagination:true
});
參考地址:https://www.jb51.net/article/101005.htm