转载
https://blog.csdn.net/qq_41619796/article/details/88888111
bootstrap table带跳转页面
版权声明:本文为博主原创文章,未经博主允许不得转载。 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