1.引入js和css
<link href="/asserts/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/asserts/lib/bootstrap/css/bootstrap-table.min.css" rel="stylesheet">
<link href="/asserts/lib/bootstrap/css/bootstrap-table-fixed-columns.min.css" rel="stylesheet">
<script src="/asserts/lib/jquery/jquery.min.js"></script>
<script src="/asserts/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/asserts/lib/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/asserts/lib/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script src="/asserts/lib/bootstrap/js/bootstrap-table-fixed-columns.min.js"></script>
2.在bootstrap初始化是设置固定的列数
//bootstrap-table初始化
$("#bootstrap-table").bootstrapTable({
url: "",
//请求后台的URL(*)
dataType: "json",
// 此间是与client不一样的地方=======================开始
contentType: "application/x-www-form-urlencoded",
sidePagination: "server",
//分页方式:client客户端分页,server服务端分页(*)
//修改请求参数,不设置则有默认值 ,返回值必须是一个对象
method: 'POST',
//请求方式(*)
toolbar: '#toolbar',
toolbarAlign:'right',
sortable: true,
sortName: "id",
sortOrder: "desc",
//排序方式
// 此间是与client不一样的地方=======================结束
striped: true,
//是否显示行间隔色
cache: false,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true,
showHeader: true,
pageNumber: 1,
//初始化加载第一页,默认第一页,并记录
pageSize: 10,
//每页的记录行数(*)
pageList: [10, 20, 100],
queryParams:queryParam,
//最少允许的列数
clickToSelect: true,
//是否启用点击选中行
uniqueId: "id",
//每一行的唯一标识,一般为主键列
fixedColumns:true,
fixedNumber:4
});
更多推荐
bootstraptable固定前几列
发布评论