Use of Bootstrap Paginator paging plug-in

  1. Summary

Bootstrap Paginator is a js paging plug-in based on bootstrap. It provides a series of parameters to support user customization, public methods to obtain plug-in status changes at any time, and events to monitor user actions.
Currently tested browsers include Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7 +.

Official website address:
Parameter list:

2.demo implementation
First, write a paging entity Page to receive the paging from the foreground:

public class Page {

    private int currentPage=1;    //Current page number
    private int totalPages;       //PageCount
    private int totals;           //Record total number of lines
    private int pageSize=5;       //Record lines per page
    private int prefPage;         //Previous page
    private int nextPage;         //next page

    public int getCurrentPage() {
        return currentPage;

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;

    public int getTotalPages() {
        return totalPages = totals % pageSize == 0 ? totals / pageSize : totals / pageSize + 1;

    public void setTotalPages(int totalPages) {
        this.totalPages = totalPages;

    public int getTotals() {
        return totals;

    public void setTotals(int totals) {
        this.totals = totals;

    public int getPageSize() {
        return pageSize;

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;

    public int getNextPage() {
        if (currentPage < totalPages) {
            nextPage = currentPage + 1;
        } else {
            nextPage = currentPage;
        return nextPage;

    public void setNextPage(int nextPage) {
        this.nextPage = nextPage;

    public int getPrefPage() {
        if (currentPage > 1) {
            prefPage = currentPage - 1;
        } else {
            prefPage = currentPage;
        return prefPage;

    public void setPrefPage(int prefPage) {
        this.prefPage = prefPage;

Secondly, we introduce js that the Bootstrap Paginator plug-in depends on

<link type="text/css" rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap-paginator.js"></script>

Embed the paging code in the front end. Note: for bootstrap 3 and above, you need to put the paging id="pageLimit" into the ul tag

<div id="Paginator" style="text-align: center">
    <ul id="pageLimit"></ul>

Implementation of js code:

        currentPage:'${page.currentPage}'|| 1 ,
        totalPages: ${page.totalPages},
        bootstrapMajorVersion: 3,
        pageUrl:function (type,page,current) {
            //Each page code becomes a hyperlink
            return '?page=' +page;
        itemTexts: function (type, page, current) {
            switch (type) {
                case "first": return "home page";
                case "prev": return "Previous page";
                case "next": return "next page";
                case "last": return "Last";
                case "page": return page;
     /*   onPageClicked:function (event, originalEvent, type, page) {
            location.href = "?page="+page;

Final internship backend code:

    private Page p;
    @RequestMapping(value = "/Display")
    public ModelAndView Display(int page,Model model){
        ModelAndView mav = new ModelAndView();
        //TODO to achieve the required functions
        //Paging query
        List<Blog> listBlog = blogService.getBlogByPage((page-1)*p.getPageSize(),p.getPageSize());
        return mav;

Access connection:


Implementation effect: dynamic query

Effect of finishing paging~

Tags: Javascript Firefox IE JQuery

Posted on Sat, 30 Nov 2019 12:12:29 -0800 by 930913