dataTables.bootstrap.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. /* Set the defaults for DataTables initialisation */
  2. $.extend(true, $.fn.dataTable.defaults, {
  3. "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // default layout with horizobtal scrollable datatable
  4. //"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without horizobtal scroll(used when bootstrap dropdowns used in the datatable cells)
  5. "language": {
  6. "lengthMenu": " _MENU_ records ",
  7. "paginate": {
  8. "previous": '<i class="fa fa-angle-left"></i>',
  9. "next": '<i class="fa fa-angle-right"></i>'
  10. }
  11. }
  12. });
  13. /* Default class modification */
  14. $.extend($.fn.dataTableExt.oStdClasses, {
  15. "sWrapper": "dataTables_wrapper",
  16. "sFilterInput": "form-control input-small input-inline",
  17. "sLengthSelect": "form-control input-xsmall input-inline"
  18. });
  19. // In 1.10 we use the pagination renderers to draw the Bootstrap paging,
  20. // rather than custom plug-in
  21. $.fn.dataTable.defaults.renderer = 'bootstrap';
  22. $.fn.dataTable.ext.renderer.pageButton.bootstrap = function (settings, host, idx, buttons, page, pages) {
  23. var api = new $.fn.dataTable.Api(settings);
  24. var classes = settings.oClasses;
  25. var lang = settings.oLanguage.oPaginate;
  26. var btnDisplay, btnClass;
  27. var attach = function (container, buttons) {
  28. var i, ien, node, button;
  29. var clickHandler = function (e) {
  30. e.preventDefault();
  31. if (e.data.action !== 'ellipsis') {
  32. api.page(e.data.action).draw(false);
  33. }
  34. };
  35. for (i = 0, ien = buttons.length; i < ien; i++) {
  36. button = buttons[i];
  37. if ($.isArray(button)) {
  38. attach(container, button);
  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 : null
  80. })
  81. .append($('<a>', {
  82. 'href': '#'
  83. })
  84. .html(btnDisplay)
  85. )
  86. .appendTo(container);
  87. settings.oApi._fnBindAction(
  88. node, {
  89. action: button
  90. }, clickHandler
  91. );
  92. }
  93. }
  94. }
  95. };
  96. attach(
  97. $(host).empty().html('<ul class="pagination"/>').children('ul'),
  98. buttons
  99. );
  100. }
  101. /*
  102. * TableTools Bootstrap compatibility
  103. * Required TableTools 2.1+
  104. */
  105. if ($.fn.DataTable.TableTools) {
  106. // Set the classes that TableTools uses to something suitable for Bootstrap
  107. $.extend(true, $.fn.DataTable.TableTools.classes, {
  108. "container": "DTTT btn-group",
  109. "buttons": {
  110. "normal": "btn btn-default",
  111. "disabled": "disabled"
  112. },
  113. "collection": {
  114. "container": "DTTT_dropdown dropdown-menu",
  115. "buttons": {
  116. "normal": "",
  117. "disabled": "disabled"
  118. }
  119. },
  120. "print": {
  121. "info": "DTTT_Print_Info"
  122. },
  123. "select": {
  124. "row": "active"
  125. }
  126. });
  127. // Have the collection use a bootstrap compatible dropdown
  128. $.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
  129. "collection": {
  130. "container": "ul",
  131. "button": "li",
  132. "liner": "a"
  133. }
  134. });
  135. }
  136. /***
  137. Custom Pagination
  138. ***/
  139. /* API method to get paging information */
  140. $.fn.dataTableExt.oApi.fnPagingInfo = function (oSettings) {
  141. return {
  142. "iStart": oSettings._iDisplayStart,
  143. "iEnd": oSettings.fnDisplayEnd(),
  144. "iLength": oSettings._iDisplayLength,
  145. "iTotal": oSettings.fnRecordsTotal(),
  146. "iFilteredTotal": oSettings.fnRecordsDisplay(),
  147. "iPage": oSettings._iDisplayLength === -1 ?
  148. 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
  149. "iTotalPages": oSettings._iDisplayLength === -1 ?
  150. 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
  151. };
  152. };
  153. /* Bootstrap style full number pagination control */
  154. $.extend($.fn.dataTableExt.oPagination, {
  155. "bootstrap_full_number": {
  156. "fnInit": function (oSettings, nPaging, fnDraw) {
  157. var oLang = oSettings.oLanguage.oPaginate;
  158. var fnClickHandler = function (e) {
  159. e.preventDefault();
  160. if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
  161. fnDraw(oSettings);
  162. }
  163. };
  164. $(nPaging).append(
  165. '<ul class="pagination">' +
  166. '<li class="prev disabled"><a href="#" title="' + oLang.sFirst + '"><i class="fa fa-angle-double-left"></i></a></li>' +
  167. '<li class="prev disabled"><a href="#" title="' + oLang.sPrevious + '"><i class="fa fa-angle-left"></i></a></li>' +
  168. '<li class="next disabled"><a href="#" title="' + oLang.sNext + '"><i class="fa fa-angle-right"></i></a></li>' +
  169. '<li class="next disabled"><a href="#" title="' + oLang.sLast + '"><i class="fa fa-angle-double-right"></i></a></li>' +
  170. '</ul>'
  171. );
  172. var els = $('a', nPaging);
  173. $(els[0]).bind('click.DT', {
  174. action: "first"
  175. }, fnClickHandler);
  176. $(els[1]).bind('click.DT', {
  177. action: "previous"
  178. }, fnClickHandler);
  179. $(els[2]).bind('click.DT', {
  180. action: "next"
  181. }, fnClickHandler);
  182. $(els[3]).bind('click.DT', {
  183. action: "last"
  184. }, fnClickHandler);
  185. },
  186. "fnUpdate": function (oSettings, fnDraw) {
  187. var iListLength = 5;
  188. var oPaging = oSettings.oInstance.fnPagingInfo();
  189. var an = oSettings.aanFeatures.p;
  190. var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
  191. if (oPaging.iTotalPages < iListLength) {
  192. iStart = 1;
  193. iEnd = oPaging.iTotalPages;
  194. } else if (oPaging.iPage <= iHalf) {
  195. iStart = 1;
  196. iEnd = iListLength;
  197. } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
  198. iStart = oPaging.iTotalPages - iListLength + 1;
  199. iEnd = oPaging.iTotalPages;
  200. } else {
  201. iStart = oPaging.iPage - iHalf + 1;
  202. iEnd = iStart + iListLength - 1;
  203. }
  204. for (i = 0, iLen = an.length; i < iLen; i++) {
  205. if (oPaging.iTotalPages <= 0) {
  206. $('.pagination', an[i]).css('visibility', 'hidden');
  207. } else {
  208. $('.pagination', an[i]).css('visibility', 'visible');
  209. }
  210. // Remove the middle elements
  211. $('li:gt(1)', an[i]).filter(':not(.next)').remove();
  212. // Add the new list items and their event handlers
  213. for (j = iStart; j <= iEnd; j++) {
  214. sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
  215. $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
  216. .insertBefore($('li.next:first', an[i])[0])
  217. .bind('click', function (e) {
  218. e.preventDefault();
  219. oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
  220. fnDraw(oSettings);
  221. });
  222. }
  223. // Add / remove disabled classes from the static elements
  224. if (oPaging.iPage === 0) {
  225. $('li.prev', an[i]).addClass('disabled');
  226. } else {
  227. $('li.prev', an[i]).removeClass('disabled');
  228. }
  229. if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
  230. $('li.next', an[i]).addClass('disabled');
  231. } else {
  232. $('li.next', an[i]).removeClass('disabled');
  233. }
  234. }
  235. }
  236. }
  237. });
  238. /* Bootstrap style full number pagination control */
  239. $.extend($.fn.dataTableExt.oPagination, {
  240. "bootstrap_extended": {
  241. "fnInit": function (oSettings, nPaging, fnDraw) {
  242. var oLang = oSettings.oLanguage.oPaginate;
  243. var oPaging = oSettings.oInstance.fnPagingInfo();
  244. var fnClickHandler = function (e) {
  245. e.preventDefault();
  246. if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
  247. fnDraw(oSettings);
  248. }
  249. };
  250. $(nPaging).append(
  251. '<div class="pagination-panel"> ' + oLang.page + ' ' +
  252. '<a href="#" class="btn btn-sm default prev disabled" title="' + oLang.previous + '"><i class="fa fa-angle-left"></i></a>' +
  253. '<input type="text" class="pagination-panel-input form-control input-mini input-inline input-sm" maxlenght="5" style="text-align:center; margin: 0 5px;">' +
  254. '<a href="#" class="btn btn-sm default next disabled" title="' + oLang.next + '"><i class="fa fa-angle-right"></i></a> ' +
  255. oLang.pageOf + ' <span class="pagination-panel-total"></span>' +
  256. '</div>'
  257. );
  258. var els = $('a', nPaging);
  259. $(els[0]).bind('click.DT', {
  260. action: "previous"
  261. }, fnClickHandler);
  262. $(els[1]).bind('click.DT', {
  263. action: "next"
  264. }, fnClickHandler);
  265. $('.pagination-panel-input', nPaging).bind('change.DT', function (e) {
  266. var oPaging = oSettings.oInstance.fnPagingInfo();
  267. e.preventDefault();
  268. var page = parseInt($(this).val());
  269. if (page > 0 && page <= oPaging.iTotalPages) {
  270. if (oSettings.oApi._fnPageChange(oSettings, page - 1)) {
  271. fnDraw(oSettings);
  272. }
  273. } else {
  274. $(this).val(oPaging.iPage + 1);
  275. }
  276. });
  277. $('.pagination-panel-input', nPaging).bind('keypress.DT', function (e) {
  278. var oPaging = oSettings.oInstance.fnPagingInfo();
  279. if (e.which == 13) {
  280. var page = parseInt($(this).val());
  281. if (page > 0 && page <= oSettings.oInstance.fnPagingInfo().iTotalPages) {
  282. if (oSettings.oApi._fnPageChange(oSettings, page - 1)) {
  283. fnDraw(oSettings);
  284. }
  285. } else {
  286. $(this).val(oPaging.iPage + 1);
  287. }
  288. e.preventDefault();
  289. }
  290. });
  291. },
  292. "fnUpdate": function (oSettings, fnDraw) {
  293. var iListLength = 5;
  294. var oPaging = oSettings.oInstance.fnPagingInfo();
  295. var an = oSettings.aanFeatures.p;
  296. var i, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
  297. if (oPaging.iTotalPages < iListLength) {
  298. iStart = 1;
  299. iEnd = oPaging.iTotalPages;
  300. } else if (oPaging.iPage <= iHalf) {
  301. iStart = 1;
  302. iEnd = iListLength;
  303. } else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
  304. iStart = oPaging.iTotalPages - iListLength + 1;
  305. iEnd = oPaging.iTotalPages;
  306. } else {
  307. iStart = oPaging.iPage - iHalf + 1;
  308. iEnd = iStart + iListLength - 1;
  309. }
  310. for (i = 0, iLen = an.length; i < iLen; i++) {
  311. var wrapper = $(an[i]).parents(".dataTables_wrapper");
  312. if (oPaging.iTotal <= 0) {
  313. $('.dataTables_paginate, .dataTables_length', wrapper).hide();
  314. } else {
  315. $('.dataTables_paginate, .dataTables_length', wrapper).show();
  316. }
  317. if (oPaging.iTotalPages <= 0) {
  318. $('.dataTables_paginate, .dataTables_length .seperator', wrapper).hide();
  319. } else {
  320. $('.dataTables_paginate, .dataTables_length .seperator', wrapper).show();
  321. }
  322. $('.pagination-panel-total', an[i]).html(oPaging.iTotalPages);
  323. $('.pagination-panel-input', an[i]).val(oPaging.iPage + 1);
  324. // Remove the middle elements
  325. $('li:gt(1)', an[i]).filter(':not(.next)').remove();
  326. // Add the new list items and their event handlers
  327. for (j = iStart; j <= iEnd; j++) {
  328. sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
  329. $('<li ' + sClass + '><a href="#">' + j + '</a></li>')
  330. .insertBefore($('li.next:first', an[i])[0])
  331. .bind('click', function (e) {
  332. e.preventDefault();
  333. oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
  334. fnDraw(oSettings);
  335. });
  336. }
  337. // Add / remove disabled classes from the static elements
  338. if (oPaging.iPage === 0) {
  339. $('a.prev', an[i]).addClass('disabled');
  340. } else {
  341. $('a.prev', an[i]).removeClass('disabled');
  342. }
  343. if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
  344. $('a.next', an[i]).addClass('disabled');
  345. } else {
  346. $('a.next', an[i]).removeClass('disabled');
  347. }
  348. }
  349. }
  350. }
  351. });