jquery.dataTables.bootstrap.js 7.3 KB

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