bootstrap-table在线引用地址：
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css" rel="stylesheet">
- ajax请求方式
html：
<table data-toggle="table" id="table"></table>
$.ajax({
url: "请求地址",
data: {
//发往服务端的数据
},
type: "post",
success: function (msg) {
$("#table").bootstrapTable("destroy");
$("#table").bootstrapTable({
classes: "table table-bordered table-hover",
width: 300,
height: 500,
pageSize: 10,
pageNumber: 1,
Pagelist: [],
data: msg,//服务端传回的数据，要和下面的columns中的field名字一一对应
cache: false,
striped: true,
pagination: true,
sidePagination: "client",
search: true,
showRefresh: false,
showExport: false,
showFooter: true,
clickToSelect: true,
columns: [
{
field: "productName",
title: "器材名称",
align: "center",
},
{
field: "orderdetailsNum",
title: "销售数量",
align: "center",
},
{
field: "orderdetailsPrice",
title: "价格",
align: "center",
},
],
});
},
});
- 直接请求方式
这种方式直接将请求地址写在table标签里
<table data-toggle="table" id="table" data-method="post" data-url:"请求地址"></table>
$("#table").bootstrapTable("destroy");
$("#table").bootstrapTable({
classes: "table table-bordered table-hover",
width: 300,
height: 500,
pageSize: 10,
pageNumber: 1,
Pagelist: [],
cache: false,
striped: true,
pagination: true,
sidePagination: "client",
search: true,
showRefresh: false,
showExport: false,
showFooter: true,
clickToSelect: true,
columns: [
{
field: "productName",
title: "器材名称",
align: "center",
},
{
field: "orderdetailsNum",
title: "销售数量",
align: "center",
},
{
field: "orderdetailsPrice",
title: "价格",
align: "center",
},
],
});
服务端传回的数据，一定要和下面的columns中的field名字一一对应
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
