Print Table

/** * @update zhixin wen */ const Utils = $.fn.bootstrapTable.utils function printPageBuilderDefault (table) { return ` Print Table

Printed on: ${new Date}

${table}

` } $.extend($.fn.bootstrapTable.defaults, { showPrint: false, printAsFilteredAndSortedOnUI: true, printSortColumn: undefined, printSortOrder: 'asc', printPageBuilder (table) { return printPageBuilderDefault(table) } }) $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, { printFilter: undefined, printIgnore: false, printFormatter: undefined }) $.extend($.fn.bootstrapTable.defaults.icons, { print: { bootstrap3: 'glyphicon-print icon-share', 'bootstrap-table': 'icon-printer' }[$.fn.bootstrapTable.theme] || 'fa-print' }) $.BootstrapTable = class extends $.BootstrapTable { initToolbar (...args) { this.showToolbar = this.showToolbar || this.options.showPrint super.initToolbar(...args) if (!this.options.showPrint) { return } const $btnGroup = this.$toolbar.find('>.columns') let $print = $btnGroup.find('button.bs-print') if (!$print.length) { $print = $(` ` ).appendTo($btnGroup) } $print.off('click').on('click', () => { this.doPrint(this.options.printAsFilteredAndSortedOnUI ? this.getData() : this.options.data.slice(0)) }) } doPrint (data) { const formatValue = (row, i, column ) => { const value = Utils.calculateObjectValue(column, column.printFormatter, [row[column.field], row, i], row[column.field]) return typeof value === 'undefined' || value === null ? this.options.undefinedText : value } const buildTable = (data, columnsArray) => { const dir = this.$el.attr('dir') || 'ltr' const html = [``] for (const columns of columnsArray) { html.push('') for (let h = 0; h < columns.length; h++) { if (!columns[h].printIgnore) { html.push( ``) } } html.push('') } html.push('') for (let i = 0; i < data.length; i++) { html.push('') for (const columns of columnsArray) { for (let j = 0; j < columns.length; j++) { if (!columns[j].printIgnore && columns[j].field) { html.push('') } } } html.push('') } html.push('

${columns[h].title}
', formatValue(data[i], i, columns[j]), '

') return html.join('') } const sortRows = (data, colName, sortOrder) => { if (!colName) { return data } let reverse = sortOrder !== 'asc' reverse = -((+reverse) || -1) return data.sort((a, b) => reverse * (a[colName].localeCompare(b[colName]))) } const filterRow = (row, filters) => { for (let index = 0; index < filters.length; ++index) { if (row[filters[index].colName] !== filters[index].value) { return false } } return true } const filterRows = (data, filters) => data.filter(row => filterRow(row,filters)) const getColumnFilters = columns => !columns || !columns[0] ? [] : columns[0].filter(col => col.printFilter).map(col => ({ colName: col.field, value: col.printFilter })) data = filterRows(data,getColumnFilters(this.options.columns)) data = sortRows(data, this.options.printSortColumn, this.options.printSortOrder) const table = buildTable(data, this.options.columns) const newWin = window.open('') newWin.document.write(this.options.printPageBuilder.call(this, table)) newWin.document.close() newWin.focus() newWin.print() newWin.close() } }