需要的jar包
jquery下载
bootstrap下载
bootstrap table下载
网页中需要引入的js和css
<!--
描述:样式导入
-->
<link rel="stylesheet" href="js/bootstrap_above/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.css"/>
<!--
描述:js导入,注意顺序,jquery必须引入
bootstrap-table-zh-CN.js为表格汉化的文件
FileSaver.min.js等是关联引用文件
-->
<script src="js/bootstrap_above/jquery-1.9.1/jquery.min.js"></script>
<script src="js/bootstrap_above/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>
<script src="js/bootstrap_above/tableExport/libs/pdfmake/pdfmake.min.js"></script>
<script src="js/bootstrap_above/tableExport/libs/pdfmake/vfs_fonts.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<script type="text/javascript" src="js/bootstrap_above/tableExport/tableExport.js"></script>
$('#table').bootstrapTable('destroy').bootstrapTable({
method: 'post',
dataType: 'json',
height: 560,
toolbar: '#toolbar', //工具按钮用哪个容器
pagination: true, //是否显示分页(*)
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
sortStable: true,
showExport: true, //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportDataType: 'all', //导出的方式 all全部 selected已选择的 basic', 'all', 'selected'.
Icons:'glyphicon glyphicon-export', //导出图标
exportTypes:[ 'excel','doc','xlsx','csv', 'txt', 'sql' ], //导出文件类型 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'
exportOptions:{
// ignoreColumn: [0,1], //忽略某一列的索引
fileName: questionNaireName, //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: questionNaireName,
// excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], 设置格式
},
});
Options
showExport //是否显示导出按钮
- type: Boolean
- description: set
true
to show export button. - default:
false
exportDataType //导出表格方式(默认basic:只导出当前页的表格数据;all:导出所有数据;selected:导出选中的数据)
- type: String
- description: export data type, support: 'basic', 'all', 'selected'.
- default:
basic
exportTypes //导出文件类型 ,支持多种类型文件导出
- type: Array
- description: export types, support types: 'json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'.
- default:
['json', 'xml', 'csv', 'txt', 'sql', 'excel']
exportOptions //导出的表格参数设置,这里参照tableExport.jquery.plugin插件中的参数进行设置,点击官网文档中的option蓝色字体就可跳转到该插件的说明文档处,网址:https://github.com/hhurz/tableExport.jquery.plugin#options。
- type: Object
- description: export options of
tableExport.jquery.plugin
- default:
{}
Icons //导出按钮图标设置
- export: 'glyphicon-export icon-share'
使用案例
showExport: true, //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportTypes:['excel'], //导出文件类型
Icons:'glyphicon-export',
exportOptions:{
ignoreColumn: [0,1], //忽略某一列的索引
fileName: '总台帐报表', //文件名称设置
worksheetName: 'sheet1', //表格工作区名称
tableName: '总台帐报表',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
onMsoNumberFormat: DoOnMsoNumberFormat
},
另附如何解决导出pdf中文乱码问题
http://blog.csdn.net/youand_me/article/details/76642434