ASP.Net Bootstrap Pagination - Easy way with JQuery AJAX

There has to be at least one listing in your web application. And mostly you may use a Pager that is provided as a ASP.Net control.

Today we talk about a different way of pagination with Bootstrap and JQuery AJAX. It is much more easier and sometimes having more control to the developer.

You don't need to reinvent the wheel but we can use already built controls for this too. Thanks to "Christos Pontikis", you will find a good pagination control here.

Download it and add the references to the project.

In your java-script file, add the following,

 function SetPagination() {  
   var pageRows = 20;  
   $("#pagination").bs_pagination({  
     totalPages: Math.ceil($("#hdnTotalRecords").val() / pageRows),  
     currentPage: $('#hdnPageNumber').val(),  
     rowsPerPage: pageRows,  
     visiblePageLinks: 5,  
     showGoToPage: true,  
     showRowsPerPage: true,  
     showRowsInfo: true,  
     showRowsDefaultInfo: true,  
     disableTextSelectionInNavPane: true, // disable text selection and double click  
     onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked  
       //alert('Current page is: ' + data.currentPage + '. ' + data.rowsPerPage + ' are displayed per page.');  
       GetQuestResultPagination(data.currentPage, data.rowsPerPage);  
     }  
   });  
 }  

SetPagination() is the java-script function that we use for setting up the pagination control.

var pageRows = 20; 

This is the default value for no of rows per list.

totalPages: Math.ceil($("#hdnTotalRecords").val() / pageRows),  

This is where we set the actual no of pages with its calculation. the hdnTotalRecords is the hidden field where we keep total no of records.

currentPage: $('#hdnPageNumber').val(),

Here we set the current page number.

onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked  
       //alert('Current page is: ' + data.currentPage + '. ' + data.rowsPerPage + ' are displayed per page.');  
       GetQuestResultPagination(data.currentPage, data.rowsPerPage);  
     }  

when the pagination is changed, this even fires and the function inside it will create the ajax call to the DB and get the relevant data and make the list accordingly.

Once it is loaded, the look will be like below;

Very easy and user friendly pagination with bootstrap. Happy coding.. :)