看到好多bootstrap-table父子表的文章，都表述的不是很清楚，所以贴出了自己觉得比较易懂的代码，以做记录
如果每张表都想有子表,要把detailView设为true
数据子表如果在服务器拿的时候，必须把sidePagination 改为 server，不然子表没数据
var oTableInit = new Object(); var oInit = new Object(); $table.bootstrapTable({ url: "/pay/list/ment", paginationLoop: false, smartDisplay: false, sidePagination: "server", pagination: true, paginationPreText: "上一页", paginationNextText: "下一页", clickToSelect: true, pageNumber: 1, pageSize:10, uniqueId: 'payNo', showFooter: false, columns: [{ formatter: function (value, row, index) { return index+1 }, },{ field: 'payNo', title: '进货单号', footerFormatter: totalTextFormatter }, { field: 'priceStore', title: '门市价总额(元)', footerFormatter: totalTextFormatter }, { field: 'totalMoney', title: '实售总额(元)', footerFormatter: totalTextFormatter }, { field: 'name', title: '所属门店', footerFormatter: sumFormatter }, { field: 'creatDate', title: '创建时间', footerFormatter: sumFormatter }, { field: 'address', title: '收货地址', footerFormatter: totalTextFormatter }, { field: 'state', title: '厂家审核状态', footerFormatter: totalTextFormatter }, { field: 'paymenRate', title: '已付(%)', footerFormatter: totalTextFormatter }, { field: 'payNo', title: '添加付款信息', formatter: function (value, row, index) { return '<a class="btn btn-success add" value="'+value+'" href="javascript:void(0)">添加</a>' }, footerFormatter: totalTextFormatter },{ field: 'payNo', title: '查看', formatter: function (value, row, index) { return '<a class="btn btn-info query" value="'+value+'" href="javascript:void(0)">查看</a>' }, footerFormatter: totalTextFormatter },{ field: 'payNo', title: '删除', formatter: function (value, row, index) { return '<a class="btn btn-warning del" value="'+value+'" href="javascript:void(0)">删除</a>' }, footerFormatter: totalTextFormatter },], detailView:true, onExpandRow:function(index, row, $detail) { oTableInit.InitSubTable(index, row, $detail); } }); oTableInit.InitSubTable = function(index, row, $detail) { var payNo = row.payNo var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url:'/pay/ment/list?payNo='+payNo, pagination:false, sidePagination: "server", dataType:'json', detailView:true,//父子表 uniqueId: "salesNo", columns: [{ formatter: function (value, row, index) { return index + 1 }, }, { field: 'salesNo', title: '订单号', }, { field: 'userName', title: '顾客名称', }, { field: 'phone', title: '手机号', }, { field: 'priceStore', title: '订单门市金额(元)', }, { field: 'totalMoney', title: '订单实售金额(元)', }, { field: 'createDate', title: '创建时间', }, { field: 'operName', title: '操作员', }, { field: 'stateName', title: '订单状态', }, { field: 'paymenRate', title: '已付(%)', }, { field: 'orderRemark', title: '订单备注', formatter: function (value, row, index) { var remark = value==undefined?'':value return '<p title="'+remark+'">查看备注</p>' } } ], onExpandRow: function (index, row, $Subdetail) { oInit.InitSubTable(index, row, $Subdetail); } }); return oTableInit; }; oInit.InitSubTable = function(index, row, $detail) { var salesNo = row.salesNo var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ url:'/order/list/detail?salesNo='+salesNo, pagination:false, sidePagination: "server", dataType:'json', showFooter: true, //detailView:true,//父子表 columns: [{ field: 'id', formatter: function (value,row,index) { return index +1; }, footerFormatter: totalTextFormatter }, { field: 'name', title: '单品名称', footerFormatter: totalTextFormatter }, { field: 'price1', title: '单价', footerFormatter: priceFormatter }, { field: 'priceSales', title: '实售单价', footerFormatter: priceFormatter }, { field: 'unit', title: '单位', footerFormatter: totalTextFormatter }, { field: 'formerGoodsNo', title: '货号', footerFormatter: totalTextFormatter },{ field: 'categoryName', title: '单品类别', footerFormatter: totalTextFormatter }, { field: 'amount', title: '单品数量', footerFormatter: sumFormatter }, { field: 'priceSales', title: '销售折扣', formatter: function (value, row, index) { var type = "<span>" + ((row.priceSales / row.price1) * 100).toFixed(2) + "%</span>" return type }, footerFormatter: totalTextFormatter },], onExpandRow: function (index, row, $Subdetail) { //oInit.InitSubTable(index, row, $Subdetail); //可无限循环 } }); return oTableInit; }; Math.formatFloat = function (f, digit) { var m = Math.pow(10, digit); return parseInt(f * m, 10) / m; } function runningFormatter(value, row, index) { return index; } function totalTextFormatter(data) { return '--'; } function totalFormatter(data) { return data.length; } function priceFormatter(data) { field = this.field; return data.reduce(function (sum, row) { var ro = row[field] var ram = row.amount return Math.formatFloat(sum + (+ro * ram), 2); }, 0); } function sumFormatter(data) { field = this.field; return data.reduce(function (sum, row) { return sum + (+row[field]); }, 0); } function avgFormatter(data) { return sumFormatter.call(this, data) / data.length; } 如有不对的地方，请指正，谢谢