jquery 动态分页，本地分页

1. 动态，本地分页js

function Paging(element, options) {
    this.element = element;
    this.options = {
        pageNum: options.pageNum || 1,
        totalNum: options.totalNum,
        totalList: options.totalList,
        pageRows: options.pageRows,
        pageSizes: options.pageSizes,
        callback: options.callback
    };
    this.init();
}

Paging.prototype = {
    constructor: Paging,
    init: function() {
        this.createHtml();
        this.bindEvent();
    },
    createHtml: function() {
        var me = this;
        var content = [];
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        var totalList = me.options.totalList;
        var pageRows = me.options.pageRows;
        var pageSizes = me.options.pageSizes;
        var selecthtml = ""
        for (var i = 0; i < pageSizes.length; i++) {
            if (pageRows == pageSizes[i]) {
                selecthtml += '<option value=' + pageSizes[i] + ' selected>' + pageSizes[i] + '条/页</option>'
            } else {
                selecthtml += '<option value=' + pageSizes[i] + '>' + pageSizes[i] + '条/页</option>'
            }
        }
        content.push("<span class='totalList'> 共 " + totalList + " 条 </span><select id='page-sizes'>" + selecthtml + "</select><button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");
        if (totalNum > 6) {
            if (pageNum < 5) {
                for (var i = 1; i < 6; i++) {
                    if (pageNum !== i) {
                        content.push("<button type='button'>" + i + "</button>");
                    } else {
                        content.push("<button type='button' class='current'>" + i + "</button>");
                    }
                }
                content.push(". . .");
                content.push("<button type='button'>" + totalNum + "</button>");
            } else {
                if (pageNum < totalNum - 3) {
                    for (var i = pageNum - 2; i < pageNum + 3; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                    content.push(". . .");
                    content.push("<button type='button'>" + totalNum + "</button>");
                } else {
                    content.push("<button type='button'>" + 1 + "</button>");
                    content.push(". . .");
                    for (var i = totalNum - 4; i < totalNum + 1; i++) {
                        if (pageNum !== i) {
                            content.push("<button type='button'>" + i + "</button>");
                        } else {
                            content.push("<button type='button' class='current'>" + i + "</button>");
                        }
                    }
                }
            }
        } else {
            for (var i = 1; i < totalNum + 1; i++) {
                if (pageNum !== i) {
                    content.push("<button type='button'>" + i + "</button>");
                } else {
                    content.push("<button type='button' class='current'>" + i + "</button>");
                }
            }
        }
        content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");
        content.push("前往<input type='text' id='text' value='" + pageNum + "'></input>页");
        content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");
        me.element.html(content.join(''));
        setTimeout(function() {
            me.dis();
        }, 20);
    },
    bindEvent: function() {
        var me = this;

        function handleSizeChange(data) {
            var id = $(data).attr('id');
            var num = parseInt($(data).html());
            var pageNum = me.options.pageNum;
            if (id === 'prePage') {
                if (pageNum !== 1) {
                    me.options.pageNum -= 1;
                }
            } else if (id === 'nextPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum += 1;
                }
            } else if (id === 'firstPage') {
                if (pageNum !== 1) {
                    me.options.pageNum = 1;
                }
            } else if (id === 'lastPage') {
                if (pageNum !== me.options.totalNum) {
                    me.options.pageNum = me.options.totalNum;
                }
            } else if (id === 'page-sizes') {
                if (pageNum !== 1) {
                    me.options.pageNum = 1;
                }
            } else if (id === 'text') {
                var val = Number($("#text").val())
                if (val < 1 || isNaN(val)) {
                    me.options.pageNum = 1
                } else if (val > me.options.totalNum) {
                    me.options.pageNum = me.options.totalNum
                } else {
                    me.options.pageNum = val
                }
            } else {
                me.options.pageNum = num;
            }
            $("#text").val(me.options.pageNum)
            me.options.pageRows = Number($("#page-sizes").val())
            me.createHtml();
            if (me.options.callback) {
                me.options.callback(me.options.pageNum, me.options.pageRows);
            }
        }
        me.element.off('click', 'button');
        me.element.on('click', 'button', function() {
            handleSizeChange(this)
        });
        me.element.off('change', 'select');
        me.element.on('change', 'select', function() {
            handleSizeChange(this)
        });
        me.element.off('change', 'input');
        me.element.on('change', 'input', function() {
            handleSizeChange(this)
        });
    },
    dis: function() {
        var me = this;
        var pageNum = me.options.pageNum;
        var totalNum = me.options.totalNum;
        if (totalNum === 1) {
            me.element.children('#firstPage, #prePage').prop('disabled', true);
            me.element.children('#lastPage, #nextPage').prop('disabled', true);
        } else {
            if (pageNum === 1) {
                me.element.children('#firstPage, #prePage').prop('disabled', true);
            } else if (pageNum === totalNum) {
                me.element.children('#lastPage, #nextPage').prop('disabled', true);
            }
        }
    }
};
$.fn.paging = function(options) {
    return new Paging($(this), options);
};

2. 动态，本地分页css

#pagination {
	margin: auto;
	margin-left: 100px;
	text-align: right;
}

/* 外面盒子样式---自己定义 */

.page_div {
	margin-top: 20px;
	color: #666;
	text-align: right;
	padding: 0 26px 0 0;
}


/* 页数按钮样式 */

.page_div button {
	display: inline-block;
	min-width: 30px;
	height: 28px;
	cursor: pointer;
	color: #666;
	font-size: 13px;
	line-height: 28px;
	background-color: #f9f9f9;
	border: 1px solid #dce0e0;
	text-align: center;
	margin: 0 4px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


/* 单页数据选择框样式 */

#page-sizes {
	display: inline-block;
	min-width: 80px;
	height: 28px;
	cursor: pointer;
	color: #0073A9;
	font-size: 13px;
	line-height: 28px;
	background-color: #f9f9f9;
	border: 1px solid #0073A9;
	text-align: center;
	margin: 0 4px;
	border-radius: 0;
}

#page-sizes:focus-visible {
	outline: -webkit-focus-ring-color auto 0;
}

#text {
	width: 50px;
	height: 29px;
	color: #666;
	text-align: center;
	border: 1px solid #0073A9;
}

#firstPage,
#lastPage,
#nextPage,
#prePage {
	width: 50px;
	color: #0073A9;
	border: 1px solid #0073A9;
}

#nextPage,
#prePage {
	width: 70px;
}

.page_div .current {
	background-color: #0073A9;
	border-color: #0073A9;
	color: #FFF;
}

/* 页面数量 */
.totalPages {
	margin: 0 10px;
}

.totalPages span,
.totalSize span {
	color: #0073A9;
	margin: 0 5px;
}


/*button禁用*/

.page_div button:disabled {
	opacity: .5;
	cursor: no-drop;
}

3. 引入js，css

<!-- 引入css -->
<link rel="stylesheet" href="../css/supermarket.css">

<!-- 引入分页 -->
<script src="../js/page.js"></script>

<div id="page" class="page_div"></div>

4. 接口请求设置分页(本地)

let listQuery = {
		page: 1,
		limit: 8
};

let listData = []; // 列表源数据
let totalData = []; // 列表分页数据

// 分页对象
let paging = {
	pageNum: 1, // 当前页面
	totalNum: 1, // 总页码
	totalList: 0, // 记录总数量
	pageRows: 8, // 每页条数
	pageSizes: [8, 16, 32], // 每页显示个数选择器的选项设置
	callback: function(num, pageRows) { //回调函数
		 if (paging.pageRows === pageRows) {
		 	render(totalData[num - 1]);
		 } else {
		 	paging.pageRows = pageRows
		 	pagingMethods(listData, num, pageRows)
		 }
	}
};

//分页数据处理
function pagingMethods(data, pageNum, pageRows) {
	totalData = []
	let pagingData = []
	if (data.length) {
		data.forEach((item, index) => {
			if (pagingData.length < pageRows) {
				pagingData.push(item)
			} else {
				totalData.push(pagingData)
				pagingData = []
				pagingData.push(item)
			}
			if (index === data.length - 1 && pagingData.length) {
				totalData.push(pagingData)
			}
		});
		paging.totalList = data.length;
		paging.totalNum = totalData.length;
	}
	render(totalData[pageNum - 1]);
	// 渲染分页
	$("#page").paging(paging);
};

//接口请求数据
function getListMsg(data) {
	$.ajax({
		type: "post",//请求方式
		contentType: "application/json",
		url: ,//请求地址
		dataType: "json",
		data: JSON.stringify(data),
		success: function(res) {
			if (res.resultCode === "00000000") {
				//处理数据
				 listData = res.data.data;//请求的数据
				 paging.pageNum = 1;
				 pagingMethods(listData, paging.pageNum, paging.pageRows);
			}
		}
	});
}


//渲染页面
function render(data) {
	let prostr = '';
	if (data) {
		data.forEach((item, index) => {
			prostr += 需要渲染的页面结构
		})
	}
	$(放在那个标签页面).html(prostr);
};

5. 接口请求设置分页(接口返回分页)

let listQuery = {
		page: 1,
		limit: 8
};

// 分页对象
let paging = {
	pageNum: 1, // 当前页面
	totalNum: 1, // 总页码
	totalList: 0, // 记录总数量
	pageRows: 8, // 每页条数
	pageSizes: [8, 16, 32], // 每页显示个数选择器的选项设置
	callback: function(num, pageRows) { //回调函数
		if (paging.pageRows === pageRows) {
		    listQuery.page = num
		    listQuery.limit = pageRows
		   getListMsg(listQuery)
		} else {
		    listQuery.page = 1
		    listQuery.limit = pageRows
		    getListMsg(listQuery)
		}
	}
};

//接口请求数据
function getListMsg(data) {
	$.ajax({
		type: "post",//请求方式
		contentType: "application/json",
		url: ,//请求地址
		dataType: "json",
		data: JSON.stringify(data),
		success: function(res) {
			if (res.resultCode === "00000000") {
				render(res.data.data);
				paging.pageNum = res.data.current_page;
				paging.pageRows = res.data.per_page;
				paging.totalNum = res.data.last_page;
				paging.totalList = res.data.total;
				// 渲染分页
				$("#page").paging(paging);
			}
		}
	});
}

//渲染页面
function render(data) {
	let prostr = '';
	if (data) {
		data.forEach((item, index) => {
			prostr += 需要渲染的页面结构
		})
	}
	$(放在那个标签页面).html(prostr);
};