lavkach3
171 строка · 4.3 Кб
1/*! DataTables Bootstrap 5 integration
2* 2020 SpryMedia Ltd - datatables.net/license
3*/
4
5import jQuery from 'jquery';6import DataTable from 'datatables.net';7
8// Allow reassignment of the $ variable
9let $ = jQuery;10
11
12/**
13* DataTables integration for Bootstrap 5. This requires Bootstrap 5 and
14* DataTables 1.10 or newer.
15*
16* This file sets the defaults and adds options to DataTables to style its
17* controls using Bootstrap. See https://datatables.net/manual/styling/bootstrap
18* for further information.
19*/
20
21/* Set the defaults for DataTables initialisation */
22$.extend( true, DataTable.defaults, {23dom:24"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +25"<'row dt-row'<'col-sm-12'tr>>" +26"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",27renderer: 'bootstrap'28} );29
30
31/* Default class modification */
32$.extend( DataTable.ext.classes, {33sWrapper: "dataTables_wrapper dt-bootstrap5",34sFilterInput: "form-control form-control-sm",35sLengthSelect: "form-select form-select-sm",36sProcessing: "dataTables_processing card",37sPageButton: "paginate_button page-item"38} );39
40
41/* Bootstrap paging button renderer */
42DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) {43var api = new DataTable.Api( settings );44var classes = settings.oClasses;45var lang = settings.oLanguage.oPaginate;46var aria = settings.oLanguage.oAria.paginate || {};47var btnDisplay, btnClass;48
49var attach = function( container, buttons ) {50var i, ien, node, button;51var clickHandler = function ( e ) {52e.preventDefault();53if ( !$(e.currentTarget).hasClass('disabled') && api.page() != e.data.action ) {54api.page( e.data.action ).draw( 'page' );55}56};57
58for ( i=0, ien=buttons.length ; i<ien ; i++ ) {59button = buttons[i];60
61if ( Array.isArray( button ) ) {62attach( container, button );63}64else {65btnDisplay = '';66btnClass = '';67
68switch ( button ) {69case 'ellipsis':70btnDisplay = '…';71btnClass = 'disabled';72break;73
74case 'first':75btnDisplay = lang.sFirst;76btnClass = button + (page > 0 ?77'' : ' disabled');78break;79
80case 'previous':81btnDisplay = lang.sPrevious;82btnClass = button + (page > 0 ?83'' : ' disabled');84break;85
86case 'next':87btnDisplay = lang.sNext;88btnClass = button + (page < pages-1 ?89'' : ' disabled');90break;91
92case 'last':93btnDisplay = lang.sLast;94btnClass = button + (page < pages-1 ?95'' : ' disabled');96break;97
98default:99btnDisplay = button + 1;100btnClass = page === button ?101'active' : '';102break;103}104
105if ( btnDisplay ) {106var disabled = btnClass.indexOf('disabled') !== -1;107
108node = $('<li>', {109'class': classes.sPageButton+' '+btnClass,110'id': idx === 0 && typeof button === 'string' ?111settings.sTableId +'_'+ button :112null113} )114.append( $('<a>', {115'href': disabled ? null : '#',116'aria-controls': settings.sTableId,117'aria-disabled': disabled ? 'true' : null,118'aria-label': aria[ button ],119'role': 'link',120'aria-current': btnClass === 'active' ? 'page' : null,121'data-dt-idx': button,122'tabindex': disabled ? -1 : settings.iTabIndex,123'class': 'page-link'124} )125.html( btnDisplay )126)127.appendTo( container );128
129settings.oApi._fnBindAction(130node, {action: button}, clickHandler131);132}133}134}135};136
137var hostEl = $(host);138// IE9 throws an 'unknown error' if document.activeElement is used139// inside an iframe or frame.140var activeEl;141
142try {143// Because this approach is destroying and recreating the paging144// elements, focus is lost on the select button which is bad for145// accessibility. So we want to restore focus once the draw has146// completed147activeEl = hostEl.find(document.activeElement).data('dt-idx');148}149catch (e) {}150
151var paginationEl = hostEl.children('ul.pagination');152
153if (paginationEl.length) {154paginationEl.empty();155}156else {157paginationEl = hostEl.html('<ul/>').children('ul').addClass('pagination');158}159
160attach(161paginationEl,162buttons
163);164
165if ( activeEl !== undefined ) {166hostEl.find('[data-dt-idx='+activeEl+']').trigger('focus');167}168};169
170
171export default DataTable;172