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 = pageRowspagingMethods(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 = numlistQuery.limit = pageRowsgetListMsg(listQuery)} else {listQuery.page = 1listQuery.limit = pageRowsgetListMsg(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);
};

jquery 动态分页，本地分页相关推荐

jQuery EasyUI datagrid本地分页
2019独角兽企业重金招聘Python工程师标准>>> 代码如下: <!DOCTYPE html> <html> <head> <meta ...
Tabulator本地分页和远程分页
如果您更喜欢将数据显示为页面而不是滚动列表 Tabulator 也可以帮助您. 有两种可用的分页形式.本地分页,其中 Tabulator 将解析所有可用数据,然后对该数据集进行分页.或者远程分页,其中 ...
element表格动态列、本地分页、动态form、自定义校验集成
json数组生成table列表格数据本地分页列支持动态显示/隐藏,列顺序支持自定义编辑行,根据行数据动态生成form form支持自定义校验 <template> <div&g ...
jQuery EasyUI datagrid实现本地分页的方法
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重 ...
Vue+Element表格动态列+表格分页
LayUI表格动态列及分页LayUI+JavaScript表格动态列+表格分页效果如图: 代码: 引用JQuery,Vue,Element等文件,换成自己的路径 <!DOCTYPE html& ...
基础平台项目之集成Jquery.pagination.js实现分页
本博客介绍基于Spring Data这款orm框架加上 Jquery.pagination插件实现的分页功能. 本博客是基于一款正在开发中的github开源项目的,项目代码地址:https://git ...
jquery中ajax的分页,利用jQuery中的ajax分页实现代码
本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.j ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
mybatis的动态sql和分页
先简单讲一下mybatis. mybatis是一个orm框架.持久层框架.作用于dao层,负责数据库的访问操作. 几乎消除了jdbc的赋值代码.动态获取结果集等等. 再来是应用的需求配置: 1)核心配 ...

jquery 动态分页，本地分页

jquery 动态分页，本地分页相关推荐

最新文章

热门文章