bootstrap-table（四）数据导出

写在前面：服务器分页只能导出当前页数据

使用

bootstrap-table官网扩展上是有导出功能的，bootstrap-table-export。同时还需要一个插件：tableExport.min.js

script type="text/javascript" src="tableExport.min.js"></script>
<script src="extensions/export/bootstrap-table-export.js"></script>

option

showExport:是否显示导出按钮

• type: Boolean
• description: set true to show export button.
• default: false

exportDataType：导出数据选择：当前页、所有、选中

• 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 参照 options

• type: Object
• description: export options of tableExport.jquery.plugin
• default: {}

Icons 图标

• export: ‘glyphicon-export icon-share’

实际

1、在表格中定义

showExport: true,  //是否显示导出按钮
buttonsAlign:"right",  //按钮位置
exportTypes:['excel'],  //导出文件类型
Icons:'glyphicon-export',
exportOptions:{
    ignoreColumn: [0],  //忽略某一列的索引
    fileName: '报警记录',  //文件名称设置
    worksheetName: 'sheet1',  //表格工作区名称
    tableName: '报警记录',
    excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
}

2、不使用bootstrap-table-export，直接使用tableExport，也就是可以自定义按钮

<button class="btn btn-outline-secondary"  id="btnExport">导出</button>
//导出
function tableExport(){
    $('#getTable').tableExport(
        { 
            type: 'excel',//导出excel
            escape: 'false' ,                          
            ignoreColumn: [0],  //忽略某一列的索引
            fileName: '通话记录',  //文件名称设置
            worksheetName: 'sheet1',  //表格工作区名称
            tableName: '通话记录',
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
        }
    )
}
$('#btnExport').bind('click', function () {
    tableExport()
})