How to add dropdown with page numbers and jump to selected page in the dataTable pagination ?

Antriksh

I want to add dropdown with page numbers in the pagination. Also, on selection of any page number, we should jump tot that page of the dataTable. Please suggest the solution.
Using dataTable version 1.10.21.

kthorngren

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

Kevin

Antriksh

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

Please see this thread about more than one pagingType.

Kevin

Antriksh

@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

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

Thanks @kthorngren . You saved my day.

Antriksh

@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

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

@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

@kthorngren I have got the solution as you suggested. Thanks

tech13

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.