/
dataTables.bootstrap4.js
147 lines (124 loc) · 3.09 KB
/
dataTables.bootstrap4.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/*! DataTables Bootstrap 4 integration
* © SpryMedia Ltd - datatables.net/license
*/
(function( factory ){
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
var jq = require('jquery');
var cjsRequires = function (root, $) {
if ( ! $.fn.dataTable ) {
require('datatables.net')(root, $);
}
};
if (typeof window === 'undefined') {
module.exports = function (root, $) {
if ( ! root ) {
// CommonJS environments without a window global must pass a
// root. This will give an error otherwise
root = window;
}
if ( ! $ ) {
$ = jq( root );
}
cjsRequires( root, $ );
return factory( $, root, root.document );
};
}
else {
cjsRequires( window, jq );
module.exports = factory( jq, window, window.document );
}
}
else {
// Browser
factory( jQuery, window, document );
}
}(function( $, window, document ) {
'use strict';
var DataTable = $.fn.dataTable;
/**
* DataTables integration for Bootstrap 4.
*
* This file sets the defaults and adds options to DataTables to style its
* controls using Bootstrap. See https://datatables.net/manual/styling/bootstrap
* for further information.
*/
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
renderer: 'bootstrap'
} );
/* Default class modification */
$.extend( true, DataTable.ext.classes, {
container: "dt-container dt-bootstrap4",
search: {
input: "form-control form-control-sm"
},
length: {
select: "custom-select custom-select-sm form-control form-control-sm"
},
processing: {
container: "dt-processing card"
}
} );
/* Bootstrap paging button renderer */
DataTable.ext.renderer.pagingButton.bootstrap = function (settings, buttonType, content, active, disabled) {
var btnClasses = ['dt-paging-button', 'page-item'];
if (active) {
btnClasses.push('active');
}
if (disabled) {
btnClasses.push('disabled')
}
var li = $('<li>').addClass(btnClasses.join(' '));
var a = $('<a>', {
'href': disabled ? null : '#',
'class': 'page-link'
})
.html(content)
.appendTo(li);
return {
display: li,
clicker: a
};
};
DataTable.ext.renderer.pagingContainer.bootstrap = function (settings, buttonEls) {
return $('<ul/>').addClass('pagination').append(buttonEls);
};
DataTable.ext.renderer.layout.bootstrap = function ( settings, container, items ) {
var row = $( '<div/>', {
"class": items.full ?
'row justify-content-md-center' :
'row justify-content-between'
} )
.appendTo( container );
$.each( items, function (key, val) {
var klass;
// Apply left / right margins
if (val.table) {
klass = 'col-12';
}
else if (key === 'start') {
klass = 'col-md-auto mr-auto';
}
else if (key === 'end') {
klass = 'col-md-auto ml-auto';
}
else {
klass = 'col-md';
}
$( '<div/>', {
id: val.id || null,
"class": klass+' '+(val.className || '')
} )
.append( val.contents )
.appendTo( row );
} );
};
return DataTable;
}));