今天终于调试通过，在这里与大家分享一下。
一、相关的配置文件引入
<!-- jquery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <!-- bootstrap table --> <link href="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table-locale-all.js"></script> <script src="//cdn.bootcss.com/bootstrap-table/1.11.0/extensions/export/bootstrap-table-export.min.js"></script> <!-- bootstrap table 包含excel导出，pdf导出 --> <script src="https://rawgit.com/hhurz/tableexport.jquery.plugin/master/tableexport.js"></script> <script src="//cdn.bootcss.com/filesaver.js/2014-11-29/filesaver.min.js"></script>
注意!!!!! 这里的 tableexport.js并不是 bootcdn上的tableexport，使用的时候注意看作者，不到会导致无法导出excel
二、编写表头和工具栏
其实整个表头的编写非常简单，只需要简单的几个配置就好。
注意，把每一个bean的属性书写在th中
注意绑定工具栏
可以参考如下配置
<!-- 工具栏的按钮，可以自定义事件 --> <div id="toolbar" class="btn-group"> <button type="button" class="btn btn-default"> <i class="glyphicon glyphicon-plus"></i> </button> <button type="button" class="btn btn-default"> <i class="glyphicon glyphicon-heart"></i> </button> <button type="button" class="btn btn-default"> <i class="glyphicon glyphicon-trash"></i> </button> </div> <table id="demo" class="table table-striped table-hover table-bordered" data-toolbar="#toolbar" // 这里必须绑定工具栏，不然布局会错乱 data-search="true" data-show-refresh="true" data-show-columns="true" data-show-export="true" data-export-types="['excel']" data-export-options='{ // 导出的文件名 "filename": "products", "worksheetname": "products" }' > <thead> <tr> <th width="3%" data-field="prodid">产品id</th> <th width="10%" data-field="nameofproduct">产品名称</th> <th width="4%" data-field="categoryid">产品类别</th> <th width="5%" data-field="domicileofcapital">资本类型</th> <th width="8%" data-field="underwriter">发行机构</th> <th width="6%" data-field="managementinstitution">基金公司</th> <th width="5%" data-field="managementinstitution2">管理机构</th> <th width="3%" data-field="flag">角标</th> <th width="7%" data-field="begintime">上线时间</th> <th width="7%" data-field="endtime">下线时间</th> <th width="4%" data-field="status">发布状态</th> <th width="4%" data-field="fundraisingstatus">募集状态</th> <th width="3%" data-field="totalscore">打分</th> <th width="3%" data-field="modesofguaranteescore">担保</th> <th width="3%" data-field="invsetmenttargetscore">投资</th> <th width="3%" data-field="underwriterscore">发行</th> <th width="3%" data-field="sourceofpaymentscore">还款</th> <th width="3%" data-field="issuerdescriptionscore">融资</th> <th width="10%">操作</th> </tr> </thead> </table>
三、绑定后端逻辑
因为，bootstrap table默认是使用了form表单的方式提交，其分页参数与查询参数都与我们的后端逻辑协议不一致。(官方就缺少这一部分的文档)
所以，我们需要更具其协议做一个自定义的配置。
$(function() { $("#demo").bootstraptable({ url: "http://ydjr.dev.chengyiwm.com/goldman-mgr/listproduct", sortname: "prodid", //排序列 striped: true, //條紋行 sidepagination: "server", //服务器分页 clicktoselect: true, //选择行即选择checkbox singleselect: true, //仅允许单选 searchonenterkey: true, //enter键搜索 pagination: true, //启用分页 escape: true, //过滤危险字符 queryparams: getparams, //携带参数 method: "post", //请求格式 responsehandler: responsehandler, }); }); /** * 默认加载时携带参数 * * 将自带的param参数转化到cy的请求逻辑协议 */ function getparams(params) { var query = $("#searchkey").val(); console.log(json.stringify(params)); return { head: { userid: "11154", skey: "6fc19fce5d8dcf130954d8ae2cadb30a", platform: "pc", imei: "", appversion: "", cityid: "", platformversion: "", deviceid: "", channel: "", protoversion: 1, ispreview: 2 }, body: { 'query': params.search, // 搜索参数 'start': params.offset, // 分页开始位置 'pagesize': params.limit, //每页多少条 } } } /** * 获取返回的数据的时候做相应处理，让bootstrap table认识我们的返回格式 * @param {object} res */ function responsehandler(res) { return { "rows": res.body.listproduct, // 具体每一个bean的列表 "total": res.body.totalcount // 总共有多少条返回数据 } }
ok配置完成后给大家看看我们的显示效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
更多bootstrap table使用心得总结。