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: http://bootstrappaginator.org/
Parameter list: https://my.oschina.net/shunshun/blog/204587

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>
 </div>

Implementation of js code:

 <script>
    $('#pageLimit').bootstrapPaginator({
        currentPage:'${page.currentPage}'|| 1 ,
        totalPages: ${page.totalPages},
        size:"normal",
        bootstrapMajorVersion: 3,
        alignment:"right",
        numberOfPages:${page.pageSize},
        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;
        }*/
    });
</script>

Final internship backend code:


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

Access connection:

http://localhost:8080/blogDisplay.do?page=1

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