Bootstrap-table的使用

bootstrap-table在线引用地址：

<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.1/bootstrap-table.min.css" rel="stylesheet">

1. 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",
              },
            ],
          });
        },
      });

2. 直接请求方式
   这种方式直接将请求地址写在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名字一一对应