bootstrap-table
Version:
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)
1,481 lines (1,233 loc) • 108 kB
JavaScript
/**
* @author zhixin wen <wenzhixin2010@gmail.com>
* version: 1.21.3
* https://github.com/wenzhixin/bootstrap-table/
*/
import Constants from './constants/index.js'
import Utils from './utils/index.js'
import VirtualScroll from './virtual-scroll/index.js'
class BootstrapTable {
constructor (el, options) {
this.options = options
this.$el = $(el)
this.$el_ = this.$el.clone()
this.timeoutId_ = 0
this.timeoutFooter_ = 0
}
init () {
this.initConstants()
this.initLocale()
this.initContainer()
this.initTable()
this.initHeader()
this.initData()
this.initHiddenRows()
this.initToolbar()
this.initPagination()
this.initBody()
this.initSearchText()
this.initServer()
}
initConstants () {
const opts = this.options
this.constants = Constants.CONSTANTS
this.constants.theme = $.fn.bootstrapTable.theme
this.constants.dataToggle = this.constants.html.dataToggle || 'data-toggle'
// init iconsPrefix and icons
const iconsPrefix = Utils.getIconsPrefix($.fn.bootstrapTable.theme)
const icons = Utils.getIcons(iconsPrefix)
if (typeof opts.icons === 'string') {
opts.icons = Utils.calculateObjectValue(null, opts.icons)
}
opts.iconsPrefix = opts.iconsPrefix || $.fn.bootstrapTable.defaults.iconsPrefix || iconsPrefix
opts.icons = Object.assign(icons, $.fn.bootstrapTable.defaults.icons, opts.icons)
// init buttons class
const buttonsPrefix = opts.buttonsPrefix ? `${opts.buttonsPrefix}-` : ''
this.constants.buttonsClass = [
opts.buttonsPrefix,
buttonsPrefix + opts.buttonsClass,
Utils.sprintf(`${buttonsPrefix}%s`, opts.iconSize)
].join(' ').trim()
this.buttons = Utils.calculateObjectValue(this, opts.buttons, [], {})
if (typeof this.buttons !== 'object') {
this.buttons = {}
}
}
initLocale () {
if (this.options.locale) {
const locales = $.fn.bootstrapTable.locales
const parts = this.options.locale.split(/-|_/)
parts[0] = parts[0].toLowerCase()
if (parts[1]) {
parts[1] = parts[1].toUpperCase()
}
let localesToExtend = {}
if (locales[this.options.locale]) {
localesToExtend = locales[this.options.locale]
} else if (locales[parts.join('-')]) {
localesToExtend = locales[parts.join('-')]
} else if (locales[parts[0]]) {
localesToExtend = locales[parts[0]]
}
for (const [formatName, func] of Object.entries(localesToExtend)) {
if (this.options[formatName] !== BootstrapTable.DEFAULTS[formatName]) {
continue
}
this.options[formatName] = func
}
}
}
initContainer () {
const topPagination = ['top', 'both'].includes(this.options.paginationVAlign) ?
'<div class="fixed-table-pagination clearfix"></div>' : ''
const bottomPagination = ['bottom', 'both'].includes(this.options.paginationVAlign) ?
'<div class="fixed-table-pagination"></div>' : ''
const loadingTemplate = Utils.calculateObjectValue(this.options,
this.options.loadingTemplate, [this.options.formatLoadingMessage()])
this.$container = $(`
<div class="bootstrap-table ${this.constants.theme}">
<div class="fixed-table-toolbar"></div>
${topPagination}
<div class="fixed-table-container">
<div class="fixed-table-header"><table></table></div>
<div class="fixed-table-body">
<div class="fixed-table-loading">
${loadingTemplate}
</div>
</div>
<div class="fixed-table-footer"></div>
</div>
${bottomPagination}
</div>
`)
this.$container.insertAfter(this.$el)
this.$tableContainer = this.$container.find('.fixed-table-container')
this.$tableHeader = this.$container.find('.fixed-table-header')
this.$tableBody = this.$container.find('.fixed-table-body')
this.$tableLoading = this.$container.find('.fixed-table-loading')
this.$tableFooter = this.$el.find('tfoot')
// checking if custom table-toolbar exists or not
if (this.options.buttonsToolbar) {
this.$toolbar = $('body').find(this.options.buttonsToolbar)
} else {
this.$toolbar = this.$container.find('.fixed-table-toolbar')
}
this.$pagination = this.$container.find('.fixed-table-pagination')
this.$tableBody.append(this.$el)
this.$container.after('<div class="clearfix"></div>')
this.$el.addClass(this.options.classes)
this.$tableLoading.addClass(this.options.classes)
if (this.options.height) {
this.$tableContainer.addClass('fixed-height')
if (this.options.showFooter) {
this.$tableContainer.addClass('has-footer')
}
if (this.options.classes.split(' ').includes('table-bordered')) {
this.$tableBody.append('<div class="fixed-table-border"></div>')
this.$tableBorder = this.$tableBody.find('.fixed-table-border')
this.$tableLoading.addClass('fixed-table-border')
}
this.$tableFooter = this.$container.find('.fixed-table-footer')
}
}
initTable () {
const columns = []
this.$header = this.$el.find('>thead')
if (!this.$header.length) {
this.$header = $(`<thead class="${this.options.theadClasses}"></thead>`).appendTo(this.$el)
} else if (this.options.theadClasses) {
this.$header.addClass(this.options.theadClasses)
}
this._headerTrClasses = []
this._headerTrStyles = []
this.$header.find('tr').each((i, el) => {
const $tr = $(el)
const column = []
$tr.find('th').each((i, el) => {
const $th = $(el)
// #2014: getFieldIndex and elsewhere assume this is string, causes issues if not
if (typeof $th.data('field') !== 'undefined') {
$th.data('field', `${$th.data('field')}`)
}
const _data = Object.assign({}, $th.data())
for (const key in _data) {
if ($.fn.bootstrapTable.columnDefaults.hasOwnProperty(key)) {
delete _data[key]
}
}
column.push(Utils.extend({}, {
_data: Utils.getRealDataAttr(_data),
title: $th.html(),
class: $th.attr('class'),
titleTooltip: $th.attr('title'),
rowspan: $th.attr('rowspan') ? +$th.attr('rowspan') : undefined,
colspan: $th.attr('colspan') ? +$th.attr('colspan') : undefined
}, $th.data()))
})
columns.push(column)
if ($tr.attr('class')) {
this._headerTrClasses.push($tr.attr('class'))
}
if ($tr.attr('style')) {
this._headerTrStyles.push($tr.attr('style'))
}
})
if (!Array.isArray(this.options.columns[0])) {
this.options.columns = [this.options.columns]
}
this.options.columns = Utils.extend(true, [], columns, this.options.columns)
this.columns = []
this.fieldsColumnsIndex = []
Utils.setFieldIndex(this.options.columns)
this.options.columns.forEach((columns, i) => {
columns.forEach((_column, j) => {
const column = Utils.extend({}, BootstrapTable.COLUMN_DEFAULTS, _column, { passed: _column })
if (typeof column.fieldIndex !== 'undefined') {
this.columns[column.fieldIndex] = column
this.fieldsColumnsIndex[column.field] = column.fieldIndex
}
this.options.columns[i][j] = column
})
})
// if options.data is setting, do not process tbody and tfoot data
if (!this.options.data.length) {
const htmlData = Utils.trToData(this.columns, this.$el.find('>tbody>tr'))
if (htmlData.length) {
this.options.data = htmlData
this.fromHtml = true
}
}
if (!(this.options.pagination && this.options.sidePagination !== 'server')) {
this.footerData = Utils.trToData(this.columns, this.$el.find('>tfoot>tr'))
}
if (this.footerData) {
this.$el.find('tfoot').html('<tr></tr>')
}
if (!this.options.showFooter || this.options.cardView) {
this.$tableFooter.hide()
} else {
this.$tableFooter.show()
}
}
initHeader () {
const visibleColumns = {}
const headerHtml = []
this.header = {
fields: [],
styles: [],
classes: [],
formatters: [],
detailFormatters: [],
events: [],
sorters: [],
sortNames: [],
cellStyles: [],
searchables: []
}
Utils.updateFieldGroup(this.options.columns, this.columns)
this.options.columns.forEach((columns, i) => {
const html = []
html.push(`<tr${Utils.sprintf(' class="%s"', this._headerTrClasses[i])} ${Utils.sprintf(' style="%s"', this._headerTrStyles[i])}>`)
let detailViewTemplate = ''
if (i === 0 && Utils.hasDetailViewIcon(this.options)) {
const rowspan = this.options.columns.length > 1 ?
` rowspan="${this.options.columns.length}"` : ''
detailViewTemplate = `<th class="detail"${rowspan}>
<div class="fht-cell"></div>
</th>`
}
if (detailViewTemplate && this.options.detailViewAlign !== 'right') {
html.push(detailViewTemplate)
}
columns.forEach((column, j) => {
const class_ = Utils.sprintf(' class="%s"', column['class'])
const unitWidth = column.widthUnit
const width = parseFloat(column.width)
const columnHalign = column.halign ? column.halign : column.align
const halign = Utils.sprintf('text-align: %s; ', columnHalign)
const align = Utils.sprintf('text-align: %s; ', column.align)
let style = Utils.sprintf('vertical-align: %s; ', column.valign)
style += Utils.sprintf('width: %s; ', (column.checkbox || column.radio) && !width ?
!column.showSelectTitle ? '36px' : undefined :
width ? width + unitWidth : undefined)
if (typeof column.fieldIndex === 'undefined' && !column.visible) {
return
}
const headerStyle = Utils.calculateObjectValue(null, this.options.headerStyle, [column])
const csses = []
const data_ = []
let classes = ''
if (headerStyle && headerStyle.css) {
for (const [key, value] of Object.entries(headerStyle.css)) {
csses.push(`${key}: ${value}`)
}
}
if (headerStyle && headerStyle.classes) {
classes = Utils.sprintf(' class="%s"', column['class'] ?
[column['class'], headerStyle.classes].join(' ') : headerStyle.classes)
}
if (typeof column.fieldIndex !== 'undefined') {
this.header.fields[column.fieldIndex] = column.field
this.header.styles[column.fieldIndex] = align + style
this.header.classes[column.fieldIndex] = class_
this.header.formatters[column.fieldIndex] = column.formatter
this.header.detailFormatters[column.fieldIndex] = column.detailFormatter
this.header.events[column.fieldIndex] = column.events
this.header.sorters[column.fieldIndex] = column.sorter
this.header.sortNames[column.fieldIndex] = column.sortName
this.header.cellStyles[column.fieldIndex] = column.cellStyle
this.header.searchables[column.fieldIndex] = column.searchable
if (!column.visible) {
return
}
if (this.options.cardView && !column.cardVisible) {
return
}
visibleColumns[column.field] = column
}
if (Object.keys(column._data || {}).length > 0) {
for (const [k, v] of Object.entries(column._data)) {
data_.push(`data-${k}='${typeof v === 'object' ? JSON.stringify(v) : v}'`)
}
}
html.push(`<th${Utils.sprintf(' title="%s"', column.titleTooltip)}`,
column.checkbox || column.radio ?
Utils.sprintf(' class="bs-checkbox %s"', column['class'] || '') :
classes || class_,
Utils.sprintf(' style="%s"', halign + style + csses.join('; ')),
Utils.sprintf(' rowspan="%s"', column.rowspan),
Utils.sprintf(' colspan="%s"', column.colspan),
Utils.sprintf(' data-field="%s"', column.field),
// If `column` is not the first element of `this.options.columns[0]`, then className 'data-not-first-th' should be added.
j === 0 && i > 0 ? ' data-not-first-th' : '',
data_.length > 0 ? data_.join(' ') : '',
'>')
html.push(Utils.sprintf('<div class="th-inner %s">',
this.options.sortable && column.sortable ? `sortable${columnHalign === 'center' ? ' sortable-center' : ''} both` : ''))
let text = this.options.escape && this.options.escapeTitle ? Utils.escapeHTML(column.title) : column.title
const title = text
if (column.checkbox) {
text = ''
if (!this.options.singleSelect && this.options.checkboxHeader) {
text = '<label><input name="btSelectAll" type="checkbox" /><span></span></label>'
}
this.header.stateField = column.field
}
if (column.radio) {
text = ''
this.header.stateField = column.field
}
if (!text && column.showSelectTitle) {
text += title
}
html.push(text)
html.push('</div>')
html.push('<div class="fht-cell"></div>')
html.push('</div>')
html.push('</th>')
})
if (detailViewTemplate && this.options.detailViewAlign === 'right') {
html.push(detailViewTemplate)
}
html.push('</tr>')
if (html.length > 3) {
headerHtml.push(html.join(''))
}
})
this.$header.html(headerHtml.join(''))
this.$header.find('th[data-field]').each((i, el) => {
$(el).data(visibleColumns[$(el).data('field')])
})
this.$container.off('click', '.th-inner').on('click', '.th-inner', e => {
const $this = $(e.currentTarget)
if (this.options.detailView && !$this.parent().hasClass('bs-checkbox')) {
if ($this.closest('.bootstrap-table')[0] !== this.$container[0]) {
return false
}
}
if (this.options.sortable && $this.parent().data().sortable) {
this.onSort(e)
}
})
const resizeEvent = Utils.getEventName('resize.bootstrap-table', this.$el.attr('id'))
$(window).off(resizeEvent)
if (!this.options.showHeader || this.options.cardView) {
this.$header.hide()
this.$tableHeader.hide()
this.$tableLoading.css('top', 0)
} else {
this.$header.show()
this.$tableHeader.show()
this.$tableLoading.css('top', this.$header.outerHeight() + 1)
// Assign the correct sortable arrow
this.getCaret()
$(window).on(resizeEvent, () => this.resetView())
}
this.$selectAll = this.$header.find('[name="btSelectAll"]')
this.$selectAll.off('click').on('click', e => {
e.stopPropagation()
const checked = $(e.currentTarget).prop('checked')
this[checked ? 'checkAll' : 'uncheckAll']()
this.updateSelected()
})
}
initData (data, type) {
if (type === 'append') {
this.options.data = this.options.data.concat(data)
} else if (type === 'prepend') {
this.options.data = [].concat(data).concat(this.options.data)
} else {
data = data || Utils.deepCopy(this.options.data)
this.options.data = Array.isArray(data) ? data : data[this.options.dataField]
}
this.data = [...this.options.data]
if (this.options.sortReset) {
this.unsortedData = [...this.data]
}
if (this.options.sidePagination === 'server') {
return
}
this.initSort()
}
initSort () {
let name = this.options.sortName
const order = this.options.sortOrder === 'desc' ? -1 : 1
const index = this.header.fields.indexOf(this.options.sortName)
let timeoutId = 0
if (index !== -1) {
if (this.options.sortStable) {
this.data.forEach((row, i) => {
if (!row.hasOwnProperty('_position')) {
row._position = i
}
})
}
if (this.options.customSort) {
Utils.calculateObjectValue(this.options, this.options.customSort, [
this.options.sortName,
this.options.sortOrder,
this.data
])
} else {
this.data.sort((a, b) => {
if (this.header.sortNames[index]) {
name = this.header.sortNames[index]
}
const aa = Utils.getItemField(a, name, this.options.escape)
const bb = Utils.getItemField(b, name, this.options.escape)
const value = Utils.calculateObjectValue(this.header, this.header.sorters[index], [aa, bb, a, b])
if (value !== undefined) {
if (this.options.sortStable && value === 0) {
return order * (a._position - b._position)
}
return order * value
}
return Utils.sort(aa, bb, order, this.options, a._position, b._position)
})
}
if (this.options.sortClass !== undefined) {
clearTimeout(timeoutId)
timeoutId = setTimeout(() => {
this.$el.removeClass(this.options.sortClass)
const index = this.$header.find(`[data-field="${this.options.sortName}"]`).index()
this.$el.find(`tr td:nth-child(${index + 1})`).addClass(this.options.sortClass)
}, 250)
}
} else if (this.options.sortReset) {
this.data = [...this.unsortedData]
}
}
onSort ({ type, currentTarget }) {
const $this = type === 'keypress' ? $(currentTarget) : $(currentTarget).parent()
const $this_ = this.$header.find('th').eq($this.index())
this.$header.add(this.$header_).find('span.order').remove()
if (this.options.sortName === $this.data('field')) {
const currentSortOrder = this.options.sortOrder
const initialSortOrder = this.columns[this.fieldsColumnsIndex[$this.data('field')]].sortOrder ||
this.columns[this.fieldsColumnsIndex[$this.data('field')]].order
if (currentSortOrder === undefined) {
this.options.sortOrder = 'asc'
} else if (currentSortOrder === 'asc') {
this.options.sortOrder = this.options.sortReset ? initialSortOrder === 'asc' ? 'desc' : undefined : 'desc'
} else if (this.options.sortOrder === 'desc') {
this.options.sortOrder = this.options.sortReset ? initialSortOrder === 'desc' ? 'asc' : undefined : 'asc'
}
if (this.options.sortOrder === undefined) {
this.options.sortName = undefined
}
} else {
this.options.sortName = $this.data('field')
if (this.options.rememberOrder) {
this.options.sortOrder = $this.data('order') === 'asc' ? 'desc' : 'asc'
} else {
this.options.sortOrder = this.columns[this.fieldsColumnsIndex[$this.data('field')]].sortOrder ||
this.columns[this.fieldsColumnsIndex[$this.data('field')]].order
}
}
this.trigger('sort', this.options.sortName, this.options.sortOrder)
$this.add($this_).data('order', this.options.sortOrder)
// Assign the correct sortable arrow
this.getCaret()
if (this.options.sidePagination === 'server' && this.options.serverSort) {
this.options.pageNumber = 1
this.initServer(this.options.silentSort)
return
}
if (this.options.pagination && this.options.sortResetPage) {
this.options.pageNumber = 1
this.initPagination()
}
this.initSort()
this.initBody()
}
initToolbar () {
const opts = this.options
let html = []
let timeoutId = 0
let $keepOpen
let switchableCount = 0
if (this.$toolbar.find('.bs-bars').children().length) {
$('body').append($(opts.toolbar))
}
this.$toolbar.html('')
if (typeof opts.toolbar === 'string' || typeof opts.toolbar === 'object') {
$(Utils.sprintf('<div class="bs-bars %s-%s"></div>', this.constants.classes.pull, opts.toolbarAlign))
.appendTo(this.$toolbar)
.append($(opts.toolbar))
}
// showColumns, showToggle, showRefresh
html = [`<div class="${[
'columns',
`columns-${opts.buttonsAlign}`,
this.constants.classes.buttonsGroup,
`${this.constants.classes.pull}-${opts.buttonsAlign}`
].join(' ')}">`]
if (typeof opts.buttonsOrder === 'string') {
opts.buttonsOrder = opts.buttonsOrder.replace(/\[|\]| |'/g, '').split(',')
}
this.buttons = Object.assign(this.buttons, {
paginationSwitch: {
text: opts.pagination ? opts.formatPaginationSwitchUp() : opts.formatPaginationSwitchDown(),
icon: opts.pagination ? opts.icons.paginationSwitchDown : opts.icons.paginationSwitchUp,
render: false,
event: this.togglePagination,
attributes: {
'aria-label': opts.formatPaginationSwitch(),
title: opts.formatPaginationSwitch()
}
},
refresh: {
text: opts.formatRefresh(),
icon: opts.icons.refresh,
render: false,
event: this.refresh,
attributes: {
'aria-label': opts.formatRefresh(),
title: opts.formatRefresh()
}
},
toggle: {
text: opts.formatToggleOn(),
icon: opts.icons.toggleOff,
render: false,
event: this.toggleView,
attributes: {
'aria-label': opts.formatToggleOn(),
title: opts.formatToggleOn()
}
},
fullscreen: {
text: opts.formatFullscreen(),
icon: opts.icons.fullscreen,
render: false,
event: this.toggleFullscreen,
attributes: {
'aria-label': opts.formatFullscreen(),
title: opts.formatFullscreen()
}
},
columns: {
render: false,
html: () => {
const html = []
html.push(`<div class="keep-open ${this.constants.classes.buttonsDropdown}" title="${opts.formatColumns()}">
<button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown"
aria-label="${opts.formatColumns()}" title="${opts.formatColumns()}">
${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : ''}
${opts.showButtonText ? opts.formatColumns() : ''}
${this.constants.html.dropdownCaret}
</button>
${this.constants.html.toolbarDropdown[0]}`)
if (opts.showColumnsSearch) {
html.push(
Utils.sprintf(this.constants.html.toolbarDropdownItem,
Utils.sprintf('<input type="text" class="%s" name="columnsSearch" placeholder="%s" autocomplete="off">', this.constants.classes.input, opts.formatSearch())
)
)
html.push(this.constants.html.toolbarDropdownSeparator)
}
if (opts.showColumnsToggleAll) {
const allFieldsVisible = this.getVisibleColumns().length === this.columns.filter(column => !this.isSelectionColumn(column)).length
html.push(
Utils.sprintf(this.constants.html.toolbarDropdownItem,
Utils.sprintf('<input type="checkbox" class="toggle-all" %s> <span>%s</span>',
allFieldsVisible ? 'checked="checked"' : '', opts.formatColumnsToggleAll())
)
)
html.push(this.constants.html.toolbarDropdownSeparator)
}
let visibleColumns = 0
this.columns.forEach(column => {
if (column.visible) {
visibleColumns++
}
})
this.columns.forEach((column, i) => {
if (this.isSelectionColumn(column)) {
return
}
if (opts.cardView && !column.cardVisible) {
return
}
const checked = column.visible ? ' checked="checked"' : ''
const disabled = visibleColumns <= opts.minimumCountColumns && checked ? ' disabled="disabled"' : ''
if (column.switchable) {
html.push(Utils.sprintf(this.constants.html.toolbarDropdownItem,
Utils.sprintf('<input type="checkbox" data-field="%s" value="%s"%s%s> <span>%s</span>',
column.field, i, checked, disabled, column.title)))
switchableCount++
}
})
html.push(this.constants.html.toolbarDropdown[1], '</div>')
return html.join('')
}
}
})
const buttonsHtml = {}
for (const [buttonName, buttonConfig] of Object.entries(this.buttons)) {
let buttonHtml
if (buttonConfig.hasOwnProperty('html')) {
if (typeof buttonConfig.html === 'function') {
buttonHtml = buttonConfig.html()
} else if (typeof buttonConfig.html === 'string') {
buttonHtml = buttonConfig.html
}
} else {
buttonHtml = `<button class="${this.constants.buttonsClass}" type="button" name="${buttonName}"`
if (buttonConfig.hasOwnProperty('attributes')) {
for (const [attributeName, value] of Object.entries(buttonConfig.attributes)) {
buttonHtml += ` ${attributeName}="${value}"`
}
}
buttonHtml += '>'
if (opts.showButtonIcons && buttonConfig.hasOwnProperty('icon')) {
buttonHtml += `${Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, buttonConfig.icon)} `
}
if (opts.showButtonText && buttonConfig.hasOwnProperty('text')) {
buttonHtml += buttonConfig.text
}
buttonHtml += '</button>'
}
buttonsHtml[buttonName] = buttonHtml
const optionName = `show${buttonName.charAt(0).toUpperCase()}${buttonName.substring(1)}`
const showOption = opts[optionName]
if ((
!buttonConfig.hasOwnProperty('render') ||
buttonConfig.hasOwnProperty('render') &&
buttonConfig.render) &&
(showOption === undefined || showOption === true)
) {
opts[optionName] = true
}
if (!opts.buttonsOrder.includes(buttonName)) {
opts.buttonsOrder.push(buttonName)
}
}
// Adding the button html to the final toolbar html when the showOption is true
for (const button of opts.buttonsOrder) {
const showOption = opts[`show${button.charAt(0).toUpperCase()}${button.substring(1)}`]
if (showOption) {
html.push(buttonsHtml[button])
}
}
html.push('</div>')
// Fix #188: this.showToolbar is for extensions
if (this.showToolbar || html.length > 2) {
this.$toolbar.append(html.join(''))
}
for (const [buttonName, buttonConfig] of Object.entries(this.buttons)) {
if (buttonConfig.hasOwnProperty('event')) {
if (typeof buttonConfig.event === 'function' || typeof buttonConfig.event === 'string') {
const event = typeof buttonConfig.event === 'string' ? window[buttonConfig.event] : buttonConfig.event
this.$toolbar.find(`button[name="${buttonName}"]`)
.off('click')
.on('click', () => event.call(this))
continue
}
for (const [eventType, eventFunction] of Object.entries(buttonConfig.event)) {
const event = typeof eventFunction === 'string' ? window[eventFunction] : eventFunction
this.$toolbar.find(`button[name="${buttonName}"]`)
.off(eventType)
.on(eventType, () => event.call(this))
}
}
}
if (opts.showColumns) {
$keepOpen = this.$toolbar.find('.keep-open')
const $checkboxes = $keepOpen.find('input[type="checkbox"]:not(".toggle-all")')
const $toggleAll = $keepOpen.find('input[type="checkbox"].toggle-all')
if (switchableCount <= opts.minimumCountColumns) {
$keepOpen.find('input').prop('disabled', true)
}
$keepOpen.find('li, label').off('click').on('click', e => {
e.stopImmediatePropagation()
})
$checkboxes.off('click').on('click', ({ currentTarget }) => {
const $this = $(currentTarget)
this._toggleColumn($this.val(), $this.prop('checked'), false)
this.trigger('column-switch', $this.data('field'), $this.prop('checked'))
$toggleAll.prop('checked', $checkboxes.filter(':checked').length === this.columns.filter(column => !this.isSelectionColumn(column)).length)
})
$toggleAll.off('click').on('click', ({ currentTarget }) => {
this._toggleAllColumns($(currentTarget).prop('checked'))
this.trigger('column-switch-all', $(currentTarget).prop('checked'))
})
if (opts.showColumnsSearch) {
const $columnsSearch = $keepOpen.find('[name="columnsSearch"]')
const $listItems = $keepOpen.find('.dropdown-item-marker')
$columnsSearch.on('keyup paste change', ({ currentTarget }) => {
const $this = $(currentTarget)
const searchValue = $this.val().toLowerCase()
$listItems.show()
$checkboxes.each((i, el) => {
const $checkbox = $(el)
const $listItem = $checkbox.parents('.dropdown-item-marker')
const text = $listItem.text().toLowerCase()
if (!text.includes(searchValue)) {
$listItem.hide()
}
})
})
}
}
const handleInputEvent = $searchInput => {
const eventTriggers = 'keyup drop blur mouseup'
$searchInput.off(eventTriggers).on(eventTriggers, event => {
if (opts.searchOnEnterKey && event.keyCode !== 13) {
return
}
if ([37, 38, 39, 40].includes(event.keyCode)) {
return
}
clearTimeout(timeoutId) // doesn't matter if it's 0
timeoutId = setTimeout(() => {
this.onSearch({ currentTarget: event.currentTarget })
}, opts.searchTimeOut)
})
}
// Fix #4516: this.showSearchClearButton is for extensions
if (
(opts.search || this.showSearchClearButton) &&
typeof opts.searchSelector !== 'string'
) {
html = []
const showSearchButton = Utils.sprintf(this.constants.html.searchButton,
this.constants.buttonsClass,
opts.formatSearch(),
opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.search) : '',
opts.showButtonText ? opts.formatSearch() : ''
)
const showSearchClearButton = Utils.sprintf(this.constants.html.searchClearButton,
this.constants.buttonsClass,
opts.formatClearSearch(),
opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.clearSearch) : '',
opts.showButtonText ? opts.formatClearSearch() : ''
)
const searchInputHtml = `<input class="${this.constants.classes.input}
${Utils.sprintf(' %s%s', this.constants.classes.inputPrefix, opts.iconSize)}
search-input" type="search" aria-label="${opts.formatSearch()}" placeholder="${opts.formatSearch()}" autocomplete="off">`
let searchInputFinalHtml = searchInputHtml
if (opts.showSearchButton || opts.showSearchClearButton) {
const buttonsHtml = (opts.showSearchButton ? showSearchButton : '') +
(opts.showSearchClearButton ? showSearchClearButton : '')
searchInputFinalHtml = opts.search ? Utils.sprintf(this.constants.html.inputGroup,
searchInputHtml, buttonsHtml) : buttonsHtml
}
html.push(Utils.sprintf(`
<div class="${this.constants.classes.pull}-${opts.searchAlign} search ${this.constants.classes.inputGroup}">
%s
</div>
`, searchInputFinalHtml))
this.$toolbar.append(html.join(''))
const $searchInput = Utils.getSearchInput(this)
if (opts.showSearchButton) {
this.$toolbar.find('.search button[name=search]').off('click').on('click', () => {
clearTimeout(timeoutId) // doesn't matter if it's 0
timeoutId = setTimeout(() => {
this.onSearch({ currentTarget: $searchInput })
}, opts.searchTimeOut)
})
if (opts.searchOnEnterKey) {
handleInputEvent($searchInput)
}
} else {
handleInputEvent($searchInput)
}
if (opts.showSearchClearButton) {
this.$toolbar.find('.search button[name=clearSearch]').click(() => {
this.resetSearch()
})
}
} else if (typeof opts.searchSelector === 'string') {
const $searchInput = Utils.getSearchInput(this)
handleInputEvent($searchInput)
}
}
onSearch ({ currentTarget, firedByInitSearchText } = {}, overwriteSearchText = true) {
if (currentTarget !== undefined && $(currentTarget).length && overwriteSearchText) {
const text = $(currentTarget).val().trim()
if (this.options.trimOnSearch && $(currentTarget).val() !== text) {
$(currentTarget).val(text)
}
if (this.searchText === text) {
return
}
const $searchInput = Utils.getSearchInput(this)
const $currentTarget = currentTarget instanceof jQuery ? currentTarget : $(currentTarget)
if ($currentTarget.is($searchInput) || $currentTarget.hasClass('search-input')) {
this.searchText = text
this.options.searchText = text
}
}
if (!firedByInitSearchText) {
this.options.pageNumber = 1
}
this.initSearch()
if (firedByInitSearchText) {
if (this.options.sidePagination === 'client') {
this.updatePagination()
}
} else {
this.updatePagination()
}
this.trigger('search', this.searchText)
}
initSearch () {
this.filterOptions = this.filterOptions || this.options.filterOptions
if (this.options.sidePagination !== 'server') {
if (this.options.customSearch) {
this.data = Utils.calculateObjectValue(this.options, this.options.customSearch,
[this.options.data, this.searchText, this.filterColumns])
if (this.options.sortReset) {
this.unsortedData = [...this.data]
}
this.initSort()
return
}
const rawSearchText = this.searchText && (this.fromHtml ? Utils.escapeHTML(this.searchText) : this.searchText)
let searchText = rawSearchText ? rawSearchText.toLowerCase() : ''
const f = Utils.isEmptyObject(this.filterColumns) ? null : this.filterColumns
if (this.options.searchAccentNeutralise) {
searchText = Utils.normalizeAccent(searchText)
}
// Check filter
if (typeof this.filterOptions.filterAlgorithm === 'function') {
this.data = this.options.data.filter(item => this.filterOptions.filterAlgorithm.apply(null, [item, f]))
} else if (typeof this.filterOptions.filterAlgorithm === 'string') {
this.data = f ? this.options.data.filter(item => {
const filterAlgorithm = this.filterOptions.filterAlgorithm
if (filterAlgorithm === 'and') {
for (const key in f) {
if (
Array.isArray(f[key]) &&
!f[key].includes(item[key]) ||
!Array.isArray(f[key]) &&
item[key] !== f[key]
) {
return false
}
}
} else if (filterAlgorithm === 'or') {
let match = false
for (const key in f) {
if (
Array.isArray(f[key]) &&
f[key].includes(item[key]) ||
!Array.isArray(f[key]) &&
item[key] === f[key]
) {
match = true
}
}
return match
}
return true
}) : [...this.options.data]
}
const visibleFields = this.getVisibleFields()
this.data = searchText ? this.data.filter((item, i) => {
for (let j = 0; j < this.header.fields.length; j++) {
if (!this.header.searchables[j] || this.options.visibleSearch && visibleFields.indexOf(this.header.fields[j]) === -1) {
continue
}
const key = Utils.isNumeric(this.header.fields[j]) ? parseInt(this.header.fields[j], 10) : this.header.fields[j]
const column = this.columns[this.fieldsColumnsIndex[key]]
let value
if (typeof key === 'string') {
value = item
const props = key.split('.')
for (let i = 0; i < props.length; i++) {
if (value[props[i]] !== null) {
value = value[props[i]]
} else {
value = null
break
}
}
} else {
value = item[key]
}
if (this.options.searchAccentNeutralise) {
value = Utils.normalizeAccent(value)
}
// Fix #142: respect searchFormatter boolean
if (column && column.searchFormatter) {
value = Utils.calculateObjectValue(column,
this.header.formatters[j], [value, item, i, column.field], value)
}
if (typeof value === 'string' || typeof value === 'number') {
if (
this.options.strictSearch && `${value}`.toLowerCase() === searchText ||
this.options.regexSearch && Utils.regexCompare(value, rawSearchText)
) {
return true
}
const largerSmallerEqualsRegex = /(?:(<=|=>|=<|>=|>|<)(?:\s+)?(-?\d+)?|(-?\d+)?(\s+)?(<=|=>|=<|>=|>|<))/gm
const matches = largerSmallerEqualsRegex.exec(this.searchText)
let comparisonCheck = false
if (matches) {
const operator = matches[1] || `${matches[5]}l`
const comparisonValue = matches[2] || matches[3]
const int = parseInt(value, 10)
const comparisonInt = parseInt(comparisonValue, 10)
switch (operator) {
case '>':
case '<l':
comparisonCheck = int > comparisonInt
break
case '<':
case '>l':
comparisonCheck = int < comparisonInt
break
case '<=':
case '=<':
case '>=l':
case '=>l':
comparisonCheck = int <= comparisonInt
break
case '>=':
case '=>':
case '<=l':
case '=<l':
comparisonCheck = int >= comparisonInt
break
default:
break
}
}
if (comparisonCheck || `${value}`.toLowerCase().includes(searchText)) {
return true
}
}
}
return false
}) : this.data
if (this.options.sortReset) {
this.unsortedData = [...this.data]
}
this.initSort()
}
}
initPagination () {
const opts = this.options
if (!opts.pagination) {
this.$pagination.hide()
return
}
this.$pagination.show()
const html = []
let allSelected = false
let i
let from
let to
let $pageList
let $pre
let $next
let $number
const data = this.getData({ includeHiddenRows: false })
let pageList = opts.pageList
if (typeof pageList === 'string') {
pageList = pageList.replace(/\[|\]| /g, '').toLowerCase().split(',')
}
pageList = pageList.map(value => {
if (typeof value === 'string') {
return value.toLowerCase() === opts.formatAllRows().toLowerCase() ||
['all', 'unlimited'].includes(value.toLowerCase()) ? opts.formatAllRows() : +value
}
return value
})
this.paginationParts = opts.paginationParts
if (typeof this.paginationParts === 'string') {
this.paginationParts = this.paginationParts.replace(/\[|\]| |'/g, '').split(',')
}
if (opts.sidePagination !== 'server') {
opts.totalRows = data.length
}
this.totalPages = 0
if (opts.totalRows) {
if (opts.pageSize === opts.formatAllRows()) {
opts.pageSize = opts.totalRows
allSelected = true
}
this.totalPages = ~~((opts.totalRows - 1) / opts.pageSize) + 1
opts.totalPages = this.totalPages
}
if (this.totalPages > 0 && opts.pageNumber > this.totalPages) {
opts.pageNumber = this.totalPages
}
this.pageFrom = (opts.pageNumber - 1) * opts.pageSize + 1
this.pageTo = opts.pageNumber * opts.pageSize
if (this.pageTo > opts.totalRows) {
this.pageTo = opts.totalRows
}
if (this.options.pagination && this.options.sidePagination !== 'server') {
this.options.totalNotFiltered = this.options.data.length
}
if (!this.options.showExtendedPagination) {
this.options.totalNotFiltered = undefined
}
if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort') || this.paginationParts.includes('pageSize')) {
html.push(`<div class="${this.constants.classes.pull}-${opts.paginationDetailHAlign} pagination-detail">`)
}
if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort')) {
const paginationInfo = this.paginationParts.includes('pageInfoShort') ? opts.formatDetailPagination(opts.totalRows) : opts.formatShowingRows(this.pageFrom, this.pageTo, opts.totalRows, opts.totalNotFiltered)
html.push(`<span class="pagination-info">
${paginationInfo}
</span>`)
}
if (this.paginationParts.includes('pageSize')) {
html.push('<div class="page-list">')
const pageNumber = [
`<div class="${this.constants.classes.paginationDropdown}">
<button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown">
<span class="page-size">
${allSelected ? opts.formatAllRows() : opts.pageSize}
</span>
${this.constants.html.dropdownCaret}
</button>
${this.constants.html.pageDropdown[0]}`
]
pageList.forEach((page, i) => {
if (!opts.smartDisplay || i === 0 || pageList[i - 1] < opts.totalRows || page === opts.formatAllRows()) {
let active
if (allSelected) {
active = page === opts.formatAllRows() ? this.constants.classes.dropdownActive : ''
} else {
active = page === opts.pageSize ? this.constants.classes.dropdownActive : ''
}
pageNumber.push(Utils.sprintf(this.constants.html.pageDropdownItem, active, page))
}
})
pageNumber.push(`${this.constants.html.pageDropdown[1]}</div>`)
html.push(opts.formatRecordsPerPage(pageNumber.join('')))
}
if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort') || this.paginationParts.includes('pageSize')) {
html.push('</div></div>')
}
if (this.paginationParts.includes('pageList')) {
html.push(`<div class="${this.constants.classes.pull}-${opts.paginationHAlign} pagination">`,
Utils.sprintf(this.constants.html.pagination[0], Utils.sprintf(' pagination-%s', opts.iconSize)),
Utils.sprintf(this.constants.html.paginationItem, ' page-pre', opts.formatSRPaginationPreText(), opts.paginationPreText))
if (this.totalPages < opts.paginationSuccessivelySize) {
from = 1
to = this.totalPages
} else {
from = opts.pageNumber - opts.paginationPagesBySide
to = from + opts.paginationPagesBySide * 2
}
if (opts.pageNumber < opts.paginationSuccessivelySize - 1) {
to = opts.paginationSuccessivelySize
}
if (opts.paginationSuccessivelySize > this.totalPages - from) {
from = from - (opts.paginationSuccessivelySize - (this.totalPages - from)) + 1
}
if (from < 1) {
from = 1
}
if (to > this.totalPages) {
to = this.totalPages
}
const middleSize = Math.round(opts.paginationPagesBySide / 2)
const pageItem = (i, classes = '') => Utils.sprintf(this.constants.html.paginationItem,
classes + (i === opts.pageNumber ? ` ${this.constants.classes.paginationActive}` : ''), opts.formatSRPaginationPageText(i), i)
if (from > 1) {
let max = opts.paginationPagesBySide
if (max >= from) max = from - 1
for (i = 1; i <= max; i++) {
html.push(pageItem(i))
}
if (from - 1 === max + 1) {
i = from - 1
html.push(pageItem(i))
} else if (from - 1 > max) {
if (
from - opts.paginationPagesBySide * 2 > opts.paginationPagesBySide &&
opts.paginationUseIntermediate
) {
i = Math.round((from - middleSize) / 2 + middleSize)
html.push(pageItem(i, ' page-intermediate'))
} else {
html.push(Utils.sprintf(this.constants.html.paginationItem,
' page-first-separator disabled', '', '...'))
}
}
}
for (i = from; i <= to; i++) {
html.push(pageItem(i))
}
if (this.totalPages > to) {
let min = this.totalPages - (opts.paginationPagesBySide - 1)
if (to >= min) min = to + 1
if (to + 1 === min - 1) {
i = to + 1
html.push(pageItem(i))
} else if (min > to + 1) {
if (
this.totalPages - to > opts.paginationPagesBySide * 2 &&
opts.paginationUseIntermediate
) {
i = Math.round((this.totalPages - middleSize - to) / 2 + to)
html.push(pageItem(i, ' page-intermediate'))
} else {
html.push(Utils.sprintf(this.constants.html.paginationItem,
' page-last-separator disabled', '', '...'))
}
}
for (i = min; i <= this.totalPages; i++) {
html.push(pageItem(i))
}
}
html.push(Utils.sprintf(this.constants.html.paginationItem, ' page-next', opts.formatSRPaginationNextText(), opts.paginationNextText))
html.push(this.constants.html.pagination[1], '</div>')
}
this.$pagination.html(html.join(''))
const dropupClass = ['bottom', 'both'].includes(opts.paginationVAlign) ?
` ${this.constants.classes.dropup}` : ''
this.$pagination.last().find('.page-list > div').addClass(dropupClass)
if (!opts.onlyInfoPagination) {
$pageList = this.$pagination.find('.page-list a')
$pre = this.$pagination.find('.page-pre')
$next = this.$pagination.find('.page-next')
$number = this.$pagination.find('.page-item').not('.page-next, .page-pre, .page-last-separator, .page-first-separator')
if (this.totalPages <= 1) {
this.$pagination.find('div.pagination').hide()
}
if (opts.smartDisplay) {
if (pageList.length < 2 || opts.totalRows <= pageList[0]) {
this.$pagination.find('div.page-list').hide()
}
}
// when data is empty, hide the pagination
this.$pagination[this.getData().length ? 'show' : 'hide']()
if (!opts.paginationLoop) {
if (opts.pageNumber === 1) {
$pre.addClass('disabled')
}
if (opts.pageNumber === this.totalPages) {
$next.addClass('disabled')
}
}
if (allSelected) {
opts.pageSize = opts.formatAllRows()
}
// removed the events for last and first, onPageNumber executeds the same logic
$pageList.off('click').on('click', e => this.onPageListChange(e))
$pre.off('click').on('click', e => this.onPagePre(e))
$next.off('click').on('click', e => this.onPageNext(e))
$number.off('click').on('click', e => this.onPageNumber(e))
}
}
updatePagination (event) {
// Fix #171: IE disabled button can be clicked bug.
if (event && $(event.currentTarget).hasClass('disabled')) {
return
}
if (!this.options.maintainMetaData) {
this.resetRows()
}
this.initPagination()
this.trigger('page-change', this.options.pageNumber, this.options.pageSize)
if (this.options.sidePagination === 'server') {
this.initServer()
} else {
this.initBody()
}
}
onPageListChange (event) {
event.preventDefault()
const $this = $(event.currentTarget)
$this.parent().addClass(this.constants.classes.dropdownActive)
.siblings().removeClass(this.constants.classes.dropdownActive)
this.options.pageSize = $this.text().toUpperCase() === this.options.formatAllRows().toUpperCase() ?
this.options.formatAllRows() : +$this.text()
this.$toolbar.find('.page-size').text(this.options.pageSize)
this.updatePagination(event)
return false
}
onPagePre (event) {
if ($(event.target).hasClass('disabled')) {
return
}
event.preventDefault()
if (this.options.pageNumber - 1 === 0) {
this.options.pageNumber = this.options.totalPages
} else {
this.options.pageNumber--
}
this.updatePagination(event)
return false
}
onPageNext (event) {
if ($(event.target).hasClass('disabled')) {
return
}
event.preventDefault()
if (this.options.pageNumber + 1 > this.options.totalPages) {
this.options.pageNumber = 1
} else {
this.options.pageNumber++
}
this.updatePagination(event)
return false
}
onPageNumber (event) {
event.preventDefault()
if (this.options.pageNumber === +$(event.currentTarget).text()) {
return
}
this.options.pageNumber = +$(event.currentTarget).text()
this.updatePagination(event)
return false
}
// eslint-disable-next-line no-unused-vars
initRow (item, i, data, trFragments) {
const html = []
let style = {}
const csses = []
let data_ = ''
let attributes = {}
const htmlAttributes = []
if (Utils.findIndex(this.hiddenRows, item) > -1) {
return
}
style = Utils.calculateObjectValue(this.options, this.options.rowStyle, [