Bootstrap jquery.twbsPagination.js Dynamic Page Number Pagination Example Code

Bootstrap style pagination control adaptive:

Reference URL:Pagination reference document

1.Style and style:

2.Firstly, introduce the js file jQuery.twbsPagination.js

<span style="font-size:14px;"><script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script></span> 

3.html page

<span style="font-size:14px;"><div class="text-center"> 
 <ul id="pagination-log" class="pagination-sm"></ul> 
</div></span> 

4.Initialization

<span style="font-size:14px;">// Initialize loading information data 
function initUserlogData() { 
 //Reset the pagination component otherwise retain the last query, generally many problems occur related to these three lines of code, such as: although the data is correct, the page number is still the same as the last query 
 $('#pagination-log').empty(); 
 $('#pagination-log').removeData("twbs-pagination"); 
 $('#pagination-log').unbind("page"); 
 //Empty the data container of the page 
 $("#messagebody").empty(); 
 //Set the default current page 
 var pagenow = 1; 
  //Set the default total number of pages 
 var totalPage = 1; 
  //Set the default visible page count 
 var visiblecount = 5; 
 //Load the background data page 
 function loaddata() { 
  $.ajax({ 
   url : "/tqyh/showUserloginfo", 
   type : "post", 
   data : { 
    "currentpage" : pagenow 
   }, 
   dataType : "json", 
   success : function(data) { 
    var htmlobj = ""; 
    totalPage = data.page.totalPage;//Copy the background data to the total number of pages 
    totalcount = data.page.totalCount; 
    $("#userlogbody").empty(); 
    $.each(data.userlog, function(index, userlog) { 
     htmlobj = htmlobj + "<tr>" 
       + "<td><input type='checkbox'/></td>" + "<td>" 
       + userlog.toUserName + "</td>" + "<td>" 
       + userlog.fromUserName + "</td>" + "<td>" 
       + userlog.createTime + "</td>" + "<td>" 
       + userlog.eventType + "</td>" ; 
     if(userlog.eventType=="LOCATION"){ 
      htmlobj = htmlobj + "<td><button name="+ userlog.eventType 
              + " location='"+userlog.details+"' class='btn btn-danger btn-lg btn-sm no-radius' data-toggle='modal' data-target='#myModal' onclick='showmodal(this)' >" 
              + "<i class='glyphicon glyphicon-map-marker'> LOCATION</i>/button>/td>"; 
     } 
      htmlobj = htmlobj +"<td>"+ userlog.details + "</td>"; 
     }; 
     htmlobj = htmlobj + "</tr>"; 
     $("#userlogbody").append(htmlobj); 
     htmlobj = ""; 
    }); 
    //Compare the total number of pages on the background with the number of visible pages. If it is less than the number of visible pages, set the number of visible pages to the total number of pages. 
    if (totalPage < visiblecount) { 
      
    } 
    $('#pagination- 
      
      
     version : '1.1', 
     //Trigger the event when the page is clicked 
     onPageClick : function(event, page) { 
      // Reset the current page number to page 
      pagenow = page 
      //The function to get data from the background is called to load the data of the clicked page 
      loaddata(); 
     } 
    }); 
   }, 
   error : function(e) { 
    alert("s data access failed") 
   } 
  }); 
 } 
 //The function initialization is to call the internal function 
 loaddata(); 
};</span> 

6.The backend json data returns

7.Result screenshot:

The above-mentioned is the dynamic pagination example code of Bootstrap jquery.twbsPagination.js introduced by the editor for everyone. I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here, I also thank everyone for supporting the Yell tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)