jqPaginator分页插件的简单demo

jqPaginator插件官网

  <!--翻页-->
    <div class="row">
        <div class="col-sm-10 col-sm-offset-2">

            <ul class="pagination" id="pagination1"></ul>
        </div>

    </div>
</div>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="lib/constants.js"></script>
<script src="js/service.js"></script>
<script src="js/jqPaginator.js"></script>

添加分页元素的容器：<ul class="pagination" id="pagination1"></ul> 注意id与后面初始化保持一致；

用法很简单，首先引入jQuery和jqPaginator，之后就可以初始化分页了;

   $(function () {
        $("#text").css("display", "")
        initPagn("pagination1");
        //可以动态修改参数，不用销毁
        // $('#id').jqPaginator('option', {
        //     currentPage: 1
        // });
        Service.getContentList("text",1);
    })

    function initPagn(id, param) {
            $.jqPaginator('#' + id, {
                totalPages: 10,
                visiblePages: 5,
                currentPage: 1,
                onPageChange: function (num, type) {
                    // $('#p1').text(type + '：' + num);
                    Service.getContentList("text",num ,serviceCallback);
                }
            });

    }

页面执行加载的时候调用initpagn方法：我根据业务需求做了一些改变；官网实例：

$('#id').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,
    onPageChange: function (num, type) {
        $('#text').html('当前第' + num + '页');
    }
});

插件中已经定义了onPageChange方法当页面发生改变，num值就是当前页数；

下面是java的后端实现：

    @Select( "SELECT * FROM item limit #{param1}  ,  #{param2}")
    List<Item> limit(@Param("startIndex") int startIndex, @Param("endIndex") int endIndex);


    @Select( "SELECT count(*) FROM item ")
    int count();

主要涉及到两次查询：一次查询出列表总条数；一次limit查询；

 /**
     * @param request
     * @return Page
     * 接收curroageNo,查询数量，limit查询，返回page
     */
    @RequestMapping(value = "list",method=RequestMethod.POST)
    public Page getList2(HttpServletRequest request){
        JSONObject params = HttpUtils.getParams(request);
        //从前端返回当前页数
        int currPageNo = params.getIntValue("currPageNo");
        //实例一个page对象
        Page page = new Page();
        //set当前页数
        page.setCurrPageNo(currPageNo);
        //根据count查询set总条数
        page.setTotalCount(itemService.count());
        //pagesize：默认单页显示10条
        int pageSize = page.getPageSize();
        //limit查询的参数：（页数-1）* 单页显示数量：  如 第一页 a=10*(1-1) = 0
        int a = pageSize*(currPageNo-1);
        page.setNewsList(itemService.limit(a,pageSize));
        return  page ;
    }

返回page信息，使用的是springboot的RestController  所以直接返回了json格式；

下面是封装的page实体：

package com.jiangwei.demo.entity;

import java.util.List;

/**
 * 分页实体类
 * @author Administrator
 *
 */
public class Page {
	private int currPageNo = 1; // 当前页码
	private int pageSize = 10; // 页面大小，即每页显示记录数
	private int totalCount; // 总个数
	private int totalPageCount; // 总页数
	List<Object> list; // 每页新闻集合

	public Page() {
		super();
	}

	public Page(int currPageNo, int pageSize, int totalCount, int totalPageCount, List<Object> list) {
		super();
		this.currPageNo = currPageNo;
		this.pageSize = pageSize;
		this.totalCount = totalCount;
		this.totalPageCount = totalPageCount;
		this.list = list;
	}

	public int getCurrPageNo() {
		if(currPageNo<0){
			currPageNo = 0;
		}
		return currPageNo;
	}

	public void setCurrPageNo(int currPageNo) {
		this.currPageNo = currPageNo;
	}

	public int getPageSize() {
		return pageSize;
	}

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

	public int getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(int totalCount) {
		if (totalCount > 0) {
			this.totalCount = totalCount;
			// 计算总页数
			totalPageCount = (this.totalCount % pageSize == 0) ? (this.totalCount / pageSize)
					: ((this.totalCount / pageSize) + 1);
		}

	}

	public int getTotalPageCount() {
		return totalPageCount;
	}

	public void setTotalPageCount(int totalPageCount) {
		this.totalPageCount = totalPageCount;
	}

	public List<Object> getNewsList() {
		return list;
	}

	public void setNewsList(List<Object> newsList) {
		this.list = newsList;
	}

	@Override
	public String toString() {
		return "Page [currPageNo=" + currPageNo + ", pageSize=" + pageSize + ", totalCount=" + totalCount
				+ ", totalPageCount=" + totalPageCount + ", list=" + list + "]";
	}

}

欢迎讨论：QQ:415313909 菜鸟一枚