customDatatablePagination.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. //Configuration
  2. customPaginationStartPage = 10; //0 - disable; avalible - 1...
  3. customPaginationTable = ''; //do not change
  4. function checkIfIsNumber(evnt){
  5. var chCode = (evnt.which) ? evnt.which : evnt.keyCode;
  6. return !(chCode > 31 && (chCode < 48 || chCode > 57));
  7. }
  8. function DNSJumpToPage(){
  9. var page = jQuery('#DNSJumpToPage').val();
  10. if(page == 0){
  11. jQuery('#DNSJumpToPage').val(1);
  12. page = 1;
  13. }
  14. if(page == 1){
  15. jQuery('#DNSCustomPaginPrev').addClass('disabled');
  16. }else{
  17. jQuery('#DNSCustomPaginPrev').removeClass('disabled');
  18. }
  19. var dataTable = jQuery('#DNSJumpToPage').parents().find('.dataTable').first();
  20. var dataTableId = dataTable.prop('id');
  21. var dTableVars = jQuery('#'+dataTableId).DataTable().page.info();
  22. if(page > dTableVars.pages){
  23. jQuery('#DNSJumpToPage').val(dTableVars.pages);
  24. page = dTableVars.pages;
  25. }
  26. if(page == dTableVars.pages){
  27. jQuery('#DNSCustomPaginNext').addClass('disabled');
  28. }else{
  29. jQuery('#DNSCustomPaginNext').removeClass('disabled');
  30. }
  31. jQuery('#'+dataTableId).DataTable().page(page-1).ajax.reload(null, false);
  32. DNSReloadCustomPageNumbers(page, dTableVars.pages);
  33. }
  34. function DNSGoToPrevPage(event){
  35. event.preventDefault();
  36. if(!jQuery('#DNSCustomPaginPrev').hasClass('disabled')){
  37. var page = jQuery('#DNSJumpToPage').val();
  38. jQuery('#DNSJumpToPage').val(parseInt(page) - 1);
  39. DNSJumpToPage();
  40. }
  41. }
  42. function DNSGoToNextPage(event){
  43. if(!jQuery('#DNSCustomPaginNext').hasClass('disabled')){
  44. event.preventDefault();
  45. var page = jQuery('#DNSJumpToPage').val();
  46. jQuery('#DNSJumpToPage').val(parseInt(page) + 1);
  47. DNSJumpToPage();
  48. }
  49. }
  50. function DNSReloadCustomPageNumbers(page, maxPage){
  51. var tempPage = parseInt(page);
  52. var tempMaxPage = parseInt(maxPage);
  53. jQuery('#DNSCustomPrevButton2').children().first().html(tempPage-2);
  54. jQuery('#DNSCustomPrevButton1').children().first().html(tempPage-1);
  55. jQuery('#DNSCustomNextButton1').children().first().html(tempPage+1);
  56. jQuery('#DNSCustomNextButton2').children().first().html(tempPage+2);
  57. if(tempPage == 1){
  58. jQuery('#DNSCustomPrevButton1').addClass('hidden');
  59. jQuery('#DNSCustomPrevButton2').addClass('hidden');
  60. }else if(tempPage == 2){
  61. jQuery('#DNSCustomPrevButton2').addClass('hidden');
  62. jQuery('#DNSCustomPrevButton1').removeClass('hidden');
  63. }else{
  64. jQuery('#DNSCustomPrevButton1').removeClass('hidden');
  65. jQuery('#DNSCustomPrevButton2').removeClass('hidden');
  66. }
  67. if(tempPage == tempMaxPage){
  68. jQuery('#DNSCustomNextButton1').addClass('hidden');
  69. jQuery('#DNSCustomNextButton2').addClass('hidden');
  70. }else if(tempPage == tempMaxPage -1){
  71. jQuery('#DNSCustomNextButton2').addClass('hidden');
  72. jQuery('#DNSCustomNextButton1').removeClass('hidden');
  73. }else{
  74. jQuery('#DNSCustomNextButton1').removeClass('hidden');
  75. jQuery('#DNSCustomNextButton2').removeClass('hidden');
  76. }
  77. }
  78. function DNSJumpToButtonPage(item){
  79. var id = jQuery(item).prop('id');
  80. var curPage = jQuery('#DNSJumpToPage').val();
  81. if(id.indexOf('Next') == 9)
  82. {
  83. var pageNr = id.replace('DNSCustomNextButton', '');
  84. jQuery('#DNSJumpToPage').val(parseInt(curPage) + parseInt(pageNr));
  85. }
  86. if(id.indexOf('Prev') == 9)
  87. {
  88. var pageNr = id.replace('DNSCustomPrevButton', '');
  89. jQuery('#DNSJumpToPage').val(parseInt(curPage) - parseInt(pageNr));
  90. }
  91. DNSJumpToPage();
  92. }
  93. function addCustomPagination(tableId, startPage){
  94. if(startPage === undefined){
  95. startPage = customPaginationStartPage;
  96. }
  97. if(startPage == 0){
  98. return false;
  99. }
  100. addPaginationBlock(tableId);
  101. var dtInfo = jQuery('#'+tableId).DataTable().page.info();
  102. jQuery('#DNSJumpToPage').val(dtInfo.page + 1);
  103. if(dtInfo.pages >= startPage){
  104. jQuery('#'+tableId+'_paginate').addClass('hidden')
  105. jQuery('#DNSJumpToPageBlock').removeClass('hidden');
  106. DNSReloadCustomPageNumbers(dtInfo.page + 1, dtInfo.pages);
  107. }
  108. }
  109. function addEventsDeclarations(tableId){
  110. $(document).delegate('#DNSJumpToPage', 'change', function() {
  111. var page = jQuery('#DNSJumpToPage').val();
  112. if(page == 0){
  113. jQuery('#DNSJumpToPage').val(1);
  114. page = 1;
  115. }
  116. var dTableVars = jQuery('#'+tableId).DataTable().page.info();
  117. if(page > dTableVars.pages){
  118. jQuery('#DNSJumpToPage').val(dTableVars.pages);
  119. page = dTableVars.pages;
  120. }
  121. //jQuery('#'+tableId).DataTable().page(page-1).ajax.reload(null, false);
  122. DNSJumpToPage();
  123. });
  124. $('#'+tableId).on( 'length.dt', function(){
  125. DNSJumpToPage();
  126. });
  127. }
  128. function addPaginationBlock(tableId){
  129. if($('#DNSJumpToPageBlock').length == 0){
  130. var jumpToPageContent = '<div class="hidden pull-right" id="DNSJumpToPageBlock" style="display:inline-block;">'
  131. +'<ul class="pagination">'
  132. +'<li id="DNSCustomPaginPrev" class="paginate_button previous disabled"><a href="#" onclick="DNSGoToPrevPage(event);">Previous</a></li>'
  133. +'<li class="paginate_button" id="DNSCustomPrevButton2" onclick="DNSJumpToButtonPage(this);"> <a href="#"></a></li>'
  134. +'<li class="paginate_button" id="DNSCustomPrevButton1" onclick="DNSJumpToButtonPage(this);"> <a href="#"></a></li>'
  135. +'<li class="paginate_button"><a style="padding: 0px 0px;"><input id="DNSJumpToPage" type="text" maxlength="5" size="4" onkeypress="return checkIfIsNumber(event);" style="padding: 6px 0px; text-align: center; border:none; color:#fff; background-color:#337ab7; border-color:#337ab7;"></input></a></li>'
  136. +'<li class="paginate_button" id="DNSCustomNextButton1" onclick="DNSJumpToButtonPage(this);"> <a href="#"></a></li>'
  137. +'<li class="paginate_button" id="DNSCustomNextButton2" onclick="DNSJumpToButtonPage(this);"> <a href="#"></a></li>'
  138. +'<li id="DNSCustomPaginNext" class="paginate_button next"><a href="#" onclick="DNSGoToNextPage(event);">Next</a></li>'
  139. +'</ul></div>';
  140. jQuery('#'+tableId+'_paginate').parent().append(jumpToPageContent);
  141. addEventsDeclarations(tableId);
  142. }
  143. }
  144. function DNSgetCurrentPageNumber(){
  145. return $('#DNSJumpToPage').val();
  146. }
  147. function DNSJumpToSpecificPageNumber(number){
  148. $('#DNSJumpToPage').val(number);
  149. DNSJumpToPage();
  150. }