Answers

• kthorngren Posts: 21,558Questions: 26Answers: 4,994

  July 2020

  Maybe this Paging plugin will do what you want:
  https://datatables.net/plug-ins/pagination/select

  Kevin
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  Hi @kthorngren , thanks for replying. By adding the select plugin and paginationType as listbox, it only shows the select dropdown with page numbers.
  I want to have simple_number pagination as well as listbox type pagination both working for me.
• kthorngren Posts: 21,558Questions: 26Answers: 4,994

  July 2020

  Please see this thread about more than one pagingType.

  Kevin
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  @kthorngren @allan
  I went through the thread. Now I am trying to make my Feature plugin for paging type listbox and have the default simple_numbers pagingType working as well.
  Below is the code for feature plugin-

  $.fn.DataTable.ext.feature = [{
  fnInit: function(settings) {
  var pagination = new $.fn.dataTableExt.oPagination(settings);
  return pagination.node();
  },
  cFeature: 'F'
  }]

  Getting error - $.fn.dataTableExt.oPagination is not a constructor.

  I want to add this feature plugin as a listbox pagination control.
• kthorngren Posts: 21,558Questions: 26Answers: 4,994

  July 2020 Answer ✓

  Unfortunately its not quite that easy

  The listbox plugin is structured as a pagination plugin. The code needs refactored to use as a Feature plugin. I had some time today so I built this example based on the Select list plugin.
  http://live.datatables.net/visuxebo/1/edit

  It uses the Feature Plugin approach. It also uses the page() and page.info() API's. It uses the draw event to update the options list if the number of pages changes.

  Kevin
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  Thanks @kthorngren . You saved my day.
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  @kthorngren i have used your example. Have a issue in that. I am using DOM api to show all controls on both top and bottom of the table.

  Edit in your example - http://live.datatables.net/visuxebo/2/edit

  dom: '<"top"lSfrip>t<"bottom"lSfrip>'

  Issue - not getting page numbers in the select dropdown for bottom select plugin.

  Please help.
• kthorngren Posts: 21,558Questions: 26Answers: 4,994

  July 2020

  I don't have time to work on it at the moment but when the plugin is created it adds this call nPage.className = "paginate_page"; and this id nPaging.setAttribute('id', tableId + '_paginate');. The draw event uses the id, var selectPager = document.getElementById(tableId + '_paginate');, to find the select to populate the inputs. This won't work if you have more than one. Instead you can update the draw event to loop through all the elements with the class paginate_page. That should be all you need.

  Kevin
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  @kthorngren Actually i dont see multiple elements with class paginate_page on which i can loop.

  I am on my final stage of implementation, if you can help on this last remaining issue.
• Antriksh Posts: 33Questions: 5Answers: 0

  July 2020

  @kthorngren I have got the solution as you suggested. Thanks
• tech13 Posts: 1Questions: 0Answers: 0

  April 2021

  Hi, in my project also, I need to add select box pagination with default DataTable pagination. So first I have use DataTable Select list plugin. But after using this plugin default pagination has been removed.

  So I have search on internet and I have found https://www.webslesson.info/2021/04/how-to-add-custom-select-box-pagination-in-jquery-datatable-with-ajax-php.html this article in which it has describe how can we make custom dropdown pagination with default pagination. Below you can find sample code.

  var dataTable = $('#customer_data').DataTable({
              "processing" : true,
              "serverSide" : true,
              "order" : [],
              //"dom": 'Bfrtip',
              "retrieve": true,
              "ajax" : {
                  url:"fetch.php",
                  method:"POST",
                  data:{start:start, length:length}
              },
              "drawCallback": function( settings ){
  
                  var page_info = dataTable.page.info();
  
                  console.log(page_info);
  
                  $('#totalpages').text(page_info.pages);
  
                  var html = '';
  
                  var start = 0;
  
                  var length = page_info.length;
  
                  for(var count = 1; count <= page_info.pages; count++)
                  {                   
                      var page_number = count - 1;
  
                      html += '<option value="'+page_number+'" data-start="'+start+'" data-length="'+length+'">'+count+'</option>';
  
                      start = start + page_info.length;
                  }
                  $('#pagelist').html(html);
  
                  $('#pagelist').val(page_info.page);
              }
          });
  

  Under this link you can find complete source code for how to add custom select box pagination in DataTable. I hope this will help you.