版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41619796/article/details/88888111
老规矩先看效果图：
整个效果我都放在百度网盘了，最下面是地址：
简单说说这个：
第一引入文件，js主要是bootstrap.js,还有table的js,还有语言包的js,还有跳转js
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>//table的
<script src="js/bootstrap-table-pagejump.js"></script>//跳转的
<script src="js/bootstrap-table-zh-CN.js"></script>//语言包的第二：html定义容器来放我们的table
<div class="tableList" id="modeContent" style="width:1600px;height:400px;margin:50px auto 0">
<table id="detailsTable" class="table table-bordered table-hover .table-responsive" data-show-columns="true">
</table>
</div>第三：js部分
var tabledata={
data:[
{"ID": 1, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 2, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 3, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 4, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 5, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 6, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 7, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 8, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 9, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 10, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 11, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 12, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 13, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 14, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 15, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 16, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
{"ID": 17, "ZXMC" :"张三", "PRODUCTNAME": "1hao"},
{"ID": 18, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 19, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 20, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 21, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID":22, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 23, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 24, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 25, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
{"ID": 26, "ZXMC" :"张三", "PRODUCTNAME": "1hao","ISUSING":"启用"},
]
}
$('#detailsTable').bootstrapTable({
// url: 'http://127.0.0.1:9000/mcsas/jhgl/rest/DatalistController/zhangwenhao', //请求后台的URL（*）
data:tabledata.data,
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
dataType:"json",
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pagination: true, //是否显示分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 15, 20, 50], //可供选择的每页的行数（*）
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: $("#modeContent").height()-300, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识，一般为主键列
buttonsAlign: "right", //按钮位置
detailView: false,//父子表
ShowPaginationSwitch:false,//是否显示数据条数选择框
showExport: false,//数据导出
search:false,
paginationShowPageGo:true,//跳转到
contentType:"application/x-www-form-urlencoded",
columns: [
// {
// checkbox: true,
// cellStyle:{
// css:{"font-size":"120px"}
// }
// },
{
field: 'ID',
title: '编号',
visible: false
}, {
field: 'ZXMC',
title: '产品编号'
}, {
field: 'PRODUCTNAME',
title: '产品名称'
}
, {
field: 'PRODUCTUSER',
title: '货主名称'
}, {
field: 'PRICE',
title: '单价（元）'
},{
field: 'BARCODERULE',
title: '条码规则'
},
{
field: 'ISUSING',
title: '启用状态',
formatter: function (value, row, index) {
if (value == "启用")
return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 启用</span>';
else
return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不启用</span>';
}
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '<a href="#" mce_href="#" style="color:#000" onclick="edit(\''+ row.id + '\')">编辑</a> ';
var d = '<a href="#" mce_href="#" style="color:#000" onclick="del(\''+ row.id +'\')">删除</a> ';
return e+d;
}
}
],
queryParams: function (params) {//c传给后台的
return params;
},
formatLoadingMessage: function () {
return "数据正在加载中...";
},
formatNoMatches: function () {
return '无符合条件的记录';
},
onPostBody:function(){ //数据渲染后调动函数
var header=$("#detailsTable table thead tr th");
var body=$("#detailsTable table tbody tr td");
var footer=$("#detailsTable table tr td");
body.each(function(){
header.width((this).width());
footer.width((this).width());
});
},
onClickRow: function (row) {
console.log(row);
},
});好了，代码就是这些了，下面百度网盘有这个效果所有文件：
地址：https://pan.baidu.com/s/1dK8zPUy5n96JJuyszOO_gA
提取码：kkds