提交 | 用户 | 时间
|
58d006
|
1 |
/* Set the defaults for DataTables initialisation */ |
A |
2 |
$.extend( true, $.fn.dataTable.defaults, { |
|
3 |
"sDom": |
|
4 |
"<'row'<'col-xs-6'l><'col-xs-6'f>r>"+ |
|
5 |
"t"+ |
|
6 |
"<'row'<'col-xs-6'i><'col-xs-6'p>>", |
|
7 |
"oLanguage": { |
|
8 |
"sLengthMenu": "Display _MENU_ records" |
|
9 |
} |
|
10 |
} ); |
|
11 |
|
|
12 |
|
|
13 |
/* Default class modification */ |
|
14 |
$.extend( $.fn.dataTableExt.oStdClasses, { |
|
15 |
"sWrapper": "dataTables_wrapper form-inline", |
|
16 |
"sFilterInput": "form-control input-sm", |
|
17 |
"sLengthSelect": "form-control input-sm" |
|
18 |
} ); |
|
19 |
|
|
20 |
// In 1.10 we use the pagination renderers to draw the Bootstrap paging, |
|
21 |
// rather than custom plug-in |
|
22 |
if ( $.fn.dataTable.Api ) { |
|
23 |
$.fn.dataTable.defaults.renderer = 'bootstrap'; |
|
24 |
$.fn.dataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { |
|
25 |
var api = new $.fn.dataTable.Api( settings ); |
|
26 |
var classes = settings.oClasses; |
|
27 |
var lang = settings.oLanguage.oPaginate; |
|
28 |
var btnDisplay, btnClass; |
|
29 |
|
|
30 |
var attach = function( container, buttons ) { |
|
31 |
var i, ien, node, button; |
|
32 |
var clickHandler = function ( e ) { |
|
33 |
e.preventDefault(); |
|
34 |
//return if target is disabled |
|
35 |
if($(e.target).parent().hasClass('disabled')) return false;//ACE |
|
36 |
if ( e.data.action !== 'ellipsis' ) { |
|
37 |
api.page( e.data.action ).draw( false ); |
|
38 |
} |
|
39 |
}; |
|
40 |
|
|
41 |
for ( i=0, ien=buttons.length ; i<ien ; i++ ) { |
|
42 |
button = buttons[i]; |
|
43 |
|
|
44 |
if ( $.isArray( button ) ) { |
|
45 |
attach( container, button ); |
|
46 |
} |
|
47 |
else { |
|
48 |
btnDisplay = ''; |
|
49 |
btnClass = ''; |
|
50 |
|
|
51 |
switch ( button ) { |
|
52 |
case 'ellipsis': |
|
53 |
btnDisplay = '…'; |
|
54 |
btnClass = 'disabled'; |
|
55 |
break; |
|
56 |
|
|
57 |
case 'first': |
|
58 |
btnDisplay = lang.sFirst; |
|
59 |
btnClass = button + (page > 0 ? |
|
60 |
'' : ' disabled'); |
|
61 |
break; |
|
62 |
|
|
63 |
case 'previous': |
|
64 |
btnDisplay = lang.sPrevious; |
|
65 |
btnClass = button + (page > 0 ? |
|
66 |
'' : ' disabled'); |
|
67 |
break; |
|
68 |
|
|
69 |
case 'next': |
|
70 |
btnDisplay = lang.sNext; |
|
71 |
btnClass = button + (page < pages-1 ? |
|
72 |
'' : ' disabled'); |
|
73 |
break; |
|
74 |
|
|
75 |
case 'last': |
|
76 |
btnDisplay = lang.sLast; |
|
77 |
btnClass = button + (page < pages-1 ? |
|
78 |
'' : ' disabled'); |
|
79 |
break; |
|
80 |
|
|
81 |
default: |
|
82 |
btnDisplay = button + 1; |
|
83 |
btnClass = page === button ? |
|
84 |
'active' : ''; |
|
85 |
break; |
|
86 |
} |
|
87 |
|
|
88 |
if ( btnDisplay ) { |
|
89 |
node = $('<li>', { |
|
90 |
'class': classes.sPageButton+' '+btnClass, |
|
91 |
'aria-controls': settings.sTableId, |
|
92 |
'tabindex': settings.iTabIndex, |
|
93 |
'id': idx === 0 && typeof button === 'string' ? |
|
94 |
settings.sTableId +'_'+ button : |
|
95 |
null |
|
96 |
} ) |
|
97 |
.append( $('<a>', { |
|
98 |
'href': '#' |
|
99 |
} ) |
|
100 |
.html( btnDisplay ) |
|
101 |
) |
|
102 |
.appendTo( container ); |
|
103 |
|
|
104 |
settings.oApi._fnBindAction( |
|
105 |
node, {action: button}, clickHandler |
|
106 |
); |
|
107 |
} |
|
108 |
} |
|
109 |
} |
|
110 |
}; |
|
111 |
|
|
112 |
attach( |
|
113 |
$(host).empty().html('<ul class="pagination"/>').children('ul'), |
|
114 |
buttons |
|
115 |
); |
|
116 |
} |
|
117 |
} |
|
118 |
else { |
|
119 |
// Integration for 1.9- |
|
120 |
$.fn.dataTable.defaults.sPaginationType = 'bootstrap'; |
|
121 |
|
|
122 |
/* API method to get paging information */ |
|
123 |
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) |
|
124 |
{ |
|
125 |
return { |
|
126 |
"iStart": oSettings._iDisplayStart, |
|
127 |
"iEnd": oSettings.fnDisplayEnd(), |
|
128 |
"iLength": oSettings._iDisplayLength, |
|
129 |
"iTotal": oSettings.fnRecordsTotal(), |
|
130 |
"iFilteredTotal": oSettings.fnRecordsDisplay(), |
|
131 |
"iPage": oSettings._iDisplayLength === -1 ? |
|
132 |
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), |
|
133 |
"iTotalPages": oSettings._iDisplayLength === -1 ? |
|
134 |
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) |
|
135 |
}; |
|
136 |
}; |
|
137 |
|
|
138 |
/* Bootstrap style pagination control */ |
|
139 |
$.extend( $.fn.dataTableExt.oPagination, { |
|
140 |
"bootstrap": { |
|
141 |
"fnInit": function( oSettings, nPaging, fnDraw ) { |
|
142 |
var oLang = oSettings.oLanguage.oPaginate; |
|
143 |
var fnClickHandler = function ( e ) { |
|
144 |
alert(1); |
|
145 |
e.preventDefault(); |
|
146 |
if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { |
|
147 |
fnDraw( oSettings ); |
|
148 |
} |
|
149 |
}; |
|
150 |
|
|
151 |
//Pagination Buttons |
|
152 |
$(nPaging).append( |
|
153 |
'<ul class="pagination">'+ |
|
154 |
'<li class="prev disabled"><a href="#"><i class="fa fa-angle-double-left"></i></a></li>'+//first |
|
155 |
'<li class="prev disabled"><a href="#"><i class="fa fa-angle-left"></i></a></li>'+//next |
|
156 |
'<li class="next disabled"><a href="#"><i class="fa fa-angle-right"></i></a></li>'+//prev |
|
157 |
'<li class="next disabled"><a href="#"><i class="fa fa-angle-double-right"></i></a></li>'+//last |
|
158 |
'</ul>' |
|
159 |
); |
|
160 |
var els = $('a', nPaging); |
|
161 |
$(els[0]).bind( 'click.DT', { action: "first" }, fnClickHandler );//first |
|
162 |
$(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler );//next |
|
163 |
$(els[2]).bind( 'click.DT', { action: "next" }, fnClickHandler );//prev |
|
164 |
$(els[3]).bind( 'click.DT', { action: "last" }, fnClickHandler );//last |
|
165 |
//if you don't want the "first & last" buttons, you can remove the relevant HTML line and event handlers |
|
166 |
}, |
|
167 |
|
|
168 |
"fnUpdate": function ( oSettings, fnDraw ) { |
|
169 |
var iListLength = 5; |
|
170 |
var oPaging = oSettings.oInstance.fnPagingInfo(); |
|
171 |
var an = oSettings.aanFeatures.p; |
|
172 |
var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); |
|
173 |
|
|
174 |
if ( oPaging.iTotalPages < iListLength) { |
|
175 |
iStart = 1; |
|
176 |
iEnd = oPaging.iTotalPages; |
|
177 |
} |
|
178 |
else if ( oPaging.iPage <= iHalf ) { |
|
179 |
iStart = 1; |
|
180 |
iEnd = iListLength; |
|
181 |
} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { |
|
182 |
iStart = oPaging.iTotalPages - iListLength + 1; |
|
183 |
iEnd = oPaging.iTotalPages; |
|
184 |
} else { |
|
185 |
iStart = oPaging.iPage - iHalf + 1; |
|
186 |
iEnd = iStart + iListLength - 1; |
|
187 |
} |
|
188 |
|
|
189 |
for ( i=0, ien=an.length ; i<ien ; i++ ) { |
|
190 |
// Remove the middle elements |
|
191 |
$('li:gt(0)', an[i]).filter(':not(.next,.prev)').remove();//ACE |
|
192 |
|
|
193 |
// Add the new list items and their event handlers |
|
194 |
for ( j=iStart ; j<=iEnd ; j++ ) { |
|
195 |
sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; |
|
196 |
$('<li '+sClass+'><a href="#">'+j+'</a></li>') |
|
197 |
.insertBefore( $('li.next:eq(0)', an[i])[0] )//ACE |
|
198 |
.bind('click', function (e) { |
|
199 |
e.preventDefault(); |
|
200 |
oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; |
|
201 |
fnDraw( oSettings ); |
|
202 |
} ); |
|
203 |
} |
|
204 |
|
|
205 |
// Add / remove disabled classes from the static elements |
|
206 |
//ACE |
|
207 |
if ( oPaging.iPage === 0 ) { |
|
208 |
$('li.prev', an[i]).addClass('disabled'); |
|
209 |
} else { |
|
210 |
$('li.prev', an[i]).removeClass('disabled'); |
|
211 |
} |
|
212 |
|
|
213 |
if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { |
|
214 |
$('li.next', an[i]).addClass('disabled'); |
|
215 |
} else { |
|
216 |
$('li.next', an[i]).removeClass('disabled'); |
|
217 |
} |
|
218 |
} |
|
219 |
} |
|
220 |
} |
|
221 |
} ); |
|
222 |
} |
|
223 |
|
|
224 |
|
|
225 |
/* |
|
226 |
* TableTools Bootstrap compatibility |
|
227 |
* Required TableTools 2.1+ |
|
228 |
*/ |
|
229 |
if ( $.fn.DataTable.TableTools ) { |
|
230 |
// Set the classes that TableTools uses to something suitable for Bootstrap |
|
231 |
$.extend( true, $.fn.DataTable.TableTools.classes, { |
|
232 |
"container": "DTTT btn-group", |
|
233 |
"buttons": { |
|
234 |
"normal": "btn btn-default", |
|
235 |
"disabled": "disabled" |
|
236 |
}, |
|
237 |
"collection": { |
|
238 |
"container": "DTTT_dropdown dropdown-menu", |
|
239 |
"buttons": { |
|
240 |
"normal": "", |
|
241 |
"disabled": "disabled" |
|
242 |
} |
|
243 |
}, |
|
244 |
"print": { |
|
245 |
"info": "DTTT_print_info modal" |
|
246 |
}, |
|
247 |
"select": { |
|
248 |
"row": "active" |
|
249 |
} |
|
250 |
} ); |
|
251 |
|
|
252 |
// Have the collection use a bootstrap compatible dropdown |
|
253 |
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, { |
|
254 |
"collection": { |
|
255 |
"container": "ul", |
|
256 |
"button": "li", |
|
257 |
"liner": "a" |
|
258 |
} |
|
259 |
} ); |
|
260 |
} |
|
261 |
|