分页器组件的构建

2021-10-11

字数： 4.4k字 | 阅读时长： 25min | 阅读量：次

前提：本组件是根据项目进行开发，所以在技术选择上有相对固定的选择，当然大体使用都差不多。

需求

分页器样式以 layui 分页器为例，如下图：

分页器功能有以下几点：

显示总页数
显示总数据条数
上下页切换
可选每页数量
可跳页

技术

JavaScript 、JQuery (Ajax) 、Mustache 、Layui.css
Vue 、 httpVueLoader 、axios 、Layui.css

方案1

组件构建过程：

先确定 UI
构建静态（HTML）结构
添加样式（CSS）
绑定事件（JS）

代码如下：

//分页器
var Pager = function () {

}
Pager.prototype = {
    LIMITS_FIRST: [],
	MAX_DISPLAY: 0,
	COUNT: 0,
	renderPagerHtml: function (el, para) {
		var pagerhtml = '<div class="row" style="margin-top:10px;">' +
			'<div class="col-sm-4">' +
			'<div class="dataTables_info" id="table_info" role="alert" aria-live="polite" aria-relevant="all"></div>' +
			'</div>' +
			'<div class="col-sm-8">' +
			'<div class="dataTables_paginate paging_bootstrap" id="simpledatatable_paginate">' +
			'<ul class="pagination" style="float:right;">' +
			'</ul>' +
			'</div>' +
			'</div>' +
			'</div>';
		$(el).html(pagerhtml);

		var count = para.count;
		var start = para.start;
		var LIMIT = para.limit;
		var MAX_PAGENUM = para.max_display;
		//加载分页概览
		var pagenum = parseInt((count - 1) / LIMIT) + 1;//总页数
		var curpage = parseInt(start / LIMIT) + 1;//当前页数
		$(el + ' #table_info').html('' + count + '条记录 共' + pagenum + '页');
		//加载分页码
		if (curpage == 1) { var temp = '<li class="prev disabled" value="prev"><a>上一页</a></li>'; } else { var temp = '<li class="prev leftright" value="prev"><a>上一页</a></li>'; }
		if (pagenum <= MAX_PAGENUM) {
			//加载全部页码
			for (var i = 0; i < pagenum; i++) {
				if ((i + 1) == curpage) {
					temp += '<li class="active pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
				}
				else {
					temp += '<li class="pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
				}
			}

		}
		else if (pagenum > MAX_PAGENUM) {
			if (curpage < MAX_PAGENUM) {
				//当前页小于最大显示
				for (var i = 0; i < MAX_PAGENUM; i++) {
					if ((i + 1) == curpage) {
						temp += '<li class="active pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
					}
					else {
						temp += '<li class="pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
					}

				}
				if (curpage <= pagenum - 2) {//最后一页追加“...”代表省略的页
					temp += "<li><a>...</a></li>";
				}
			}
			else if (curpage >= MAX_PAGENUM) {//当前页大于最大值
				for (var j = 0; j < 2; j++) {//1,2页码始终显示
					temp += '<li class="pagenum" value="' + (j + 1) + '"><a>' + (j + 1) + '</a></li>';
				}
				temp += "<li><a>...</a></li>";//2页码后面用...代替部分未显示的页码
				if (curpage + 1 == pagenum) {
					for (var i = curpage - 1; i < pagenum; i++) {
						if ((i + 1) == curpage) {
							temp += '<li class="active pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
						else {
							temp += '<li class="pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
					}

				}
				else if (curpage == pagenum) {
					for (var i = curpage - 2; i < pagenum; i++) {
						if ((i + 1) == curpage) {
							temp += '<li class="active pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
						else {
							temp += '<li class="pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
					}

				}
				else {
					for (var i = curpage - 1; i < curpage + 1; i++) {
						if ((i + 1) == curpage) {
							temp += '<li class="active pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
						else {
							temp += '<li class="pagenum" value="' + (i + 1) + '"><a>' + (i + 1) + '</a></li>'
						}
					}
					temp += "<li><a>...</a></li>";

				}
			}

		}
		if (curpage == pagenum) { temp += '<li class="next disabled" value="next"><a>下一页</a></li>'; } else { temp += '<li class="next leftright" value="next"><a>下一页</a></li>'; }
		$(el + ' .pagination').html(temp);



	},
	/**
	 * 分页器：总条数、总页数、每页数、跳转输入、页码数
	 * @param el 例如：'#gatelist_page'
	 * @param para  例如：{ 'count': 100, 'start': 0, 'limit': 10, 'max_display': 5 }
	 * @param callback  例如： function (curpage: number, limit: number, start: number){ // 实现数据表格数据的改变 }
	 */
	render: function (el, para, callback) {
		var temp = '<div class="pager layui-box layui-laypage layui-laypage-default">' +
			'<div class="layui-col-md3"><span class="layui-laypage-count left"> {{count}} 条记录</span> <span class="layui-laypage-count left">共 {{pagenum}}' +
			' 页</span></div>' +
			'<div class="layui-col-md9">' +
			'<div class="right">' +
			'<span class="layui-laypage-limits">' +
			'<select>' +
			'{{#limits}}<option value="{{.}}" {{getSelected}}>{{.}} 条/页</option>{{/limits}}' +
			'</select>' +
			'</span>' +
			'<span class="layui-laypage-skip">' +
			'到第<input type="number" min="1" max="{{pagenum}}" class="layui-input" value="{{curpage}}">页' +
			'<button type="button" class="layui-laypage-btn">确定</button>' +
			'</span>' +
			'<span class="layui-laypage-pages">' +
			'{{#pagenums}}<a class="{{status}} page-item" data-page="{{num}}">{{name}}</a>{{/pagenums}}' +
			'</span>' +
			'</div>' +
			'</div>'
		var _this = this
		var start = para.start || 0;  // 从 0 开始，第几条数据
		var limit = para.limit || 0;  // 每页数据数量
		_this.COUNT = para.count || 0;  // 总数
		_this.MAX_DISPLAY = para.max_display || 0;  // 最大显示页码数量
		//加载分页概览
		var curpage = parseInt(start / limit) + 1; // 当前页数
		if (typeof callback !== 'function') {
			callback = function () { }
		}
        if (_this.LIMITS_FIRST.length === 0) {
            _this.LIMITS_FIRST = setLimits(limit)
        }
		$(el).html(Mustache.render(temp, {
			count: _this.COUNT,
			pagenum: Math.ceil(_this.COUNT / limit),
			limits: _this.LIMITS_FIRST,
            limit: limit,
			pagenums: setPageNums(curpage, limit),
			curpage: _this.COUNT === 0 ? 0 : curpage,
            getSelected: function () {
                if (Number(this) === limit) {
                    return 'selected'
                }
                return ''
            }
		}))

		// 绑定分页点击事件
		$(el + ' .layui-laypage-limits > select').unbind()
		$(el + ' .layui-laypage-limits > select').bind('change', function () {
			var value = Number($(this).val())
			changeData(1, value)
			var temp = '{{#pagenums}}<a class="{{status}} page-item" data-page="{{num}}">{{name}}</a>{{/pagenums}}'
			var pagenum = Math.ceil(_this.COUNT / value)
			$(el + ' .layui-laypage-pages').html(Mustache.render(temp, { pagenums: setPageNums(1, value) }))
			$(el + ' .layui-laypage-count:last-child()').html('共 ' + pagenum + ' 页')
			$(el + ' .layui-laypage-skip > input').attr('max', pagenum)
			bindPageNumsClick()
		})
		bindPageNumsClick()
		// 绑定页码输入/跳转事件
		$(el + ' .layui-laypage-skip > .layui-laypage-btn').unbind()
		$(el + ' .layui-laypage-skip > .layui-laypage-btn').bind('click', function () {
			var val = parseInt(Number($(el + ' .layui-laypage-skip > input').val()))
			var limit = Number($(el + ' .layui-laypage-limits > select').val())
			var lastpage = Number($(el + ' .layui-laypage-pages > .page-item.active').data('page'))
			var pagenum = Math.ceil(_this.COUNT / limit)
			if (_this.COUNT > 0) {
				if (val > pagenum) {
					val = pagenum
				} else if (val <= 0) {
					val = 1
				}
				$(el + ' .layui-laypage-skip > input').val(val)
				if (lastpage !== val) {
					changeData(val, limit)
					var temp = '{{#pagenums}}<a class="{{status}} page-item" data-page="{{num}}">{{name}}</a>{{/pagenums}}'
					$(el + ' .layui-laypage-pages').html(Mustache.render(temp, { pagenums: setPageNums(val, limit) }))
					bindPageNumsClick()
				}
			}
		})

		// 页码数绑定事件
		function bindPageNumsClick() {
			// 绑定页码点击事件
			$(el + ' .layui-laypage-pages > .page-item').unbind()
			$(el + ' .layui-laypage-pages > .page-item').bind('click', function () {
				var clss = $(this).attr('class')
				if (clss.indexOf('disabled') === -1 && clss.indexOf('active') === -1) {
					var lastpage = Number($(el + ' .layui-laypage-pages > .page-item.active').data('page'))
					var thispage = $(this).data('page')
					var limit = Number($(el + ' .layui-laypage-limits > select').val())
					if (thispage === 'prev') {
						thispage = lastpage - 1
						changeData(lastpage - 1, limit)
					} else if (thispage === 'next') {
						thispage = lastpage + 1
					} else {
						thispage = Number(thispage)
					}
					changeData(thispage, limit)
					var temp = '{{#pagenums}}<a class="{{status}} page-item" data-page="{{num}}">{{name}}</a>{{/pagenums}}'
					$(el + ' .layui-laypage-pages').html(Mustache.render(temp, { pagenums: setPageNums(thispage, limit) }))
					bindPageNumsClick()
					$(el + ' .layui-laypage-skip > input').val(thispage)
				}
			})
		}

		// 渲染页码数
		function setPageNums(curpage, limit) {
			var pageNums = []
			var pagenum = Math.ceil(_this.COUNT / limit); // 总页数
			var displayNum = Math.min(pagenum, _this.MAX_DISPLAY);
			var start = curpage - parseInt((displayNum - 1) / 2)
			start = start <= 0 ? 1 : start
			var end = start + displayNum - 1
			end = end > pagenum ? pagenum : end
			if (end === pagenum) {
				start = end - displayNum + 1
			}
			pageNums.push({
				num: 'prev',
				status: curpage === 1 ? 'layui-laypage-prev layui-disabled disabled ' : '',
				name: '上一页'
			})
			if (start - 1 > 0) {
				pageNums.push({
					num: -1,
					status: 'layui-laypage-spr layui-disabled disabled',
					name: '...'
				})
			}
			for (var i = start; i <= end; i++) {
				pageNums.push({
					num: i,
					status: i == curpage ? 'layui-laypage-curr active ' : '',
					name: i
				})
			}
			if (end + 1 <= pagenum) {
				pageNums.push({
					num: -1,
					status: 'layui-laypage-spr layui-disabled disabled',
					name: '...'
				})
			}
			pageNums.push({
				num: 'next',
				status: (curpage === pagenum || pagenum === 0) ? 'layui-laypage-next layui-disabled disabled ' : '',
				name: '下一页'
			})
			return pageNums
		}

		// 渲染分页数
		function setLimits(limit) {
			var limits = []
			for (var i = 1; i <= 10; i++) {
				limits.push(i * limit)
			}
			return limits
		}

		// 绑定页面跳转事件
		function changeData(curpage, limit) {
			var start = (curpage - 1) * limit; // 从 0 开始
			callback(curpage, limit, start)
		}
	}
}

使用示例：

<!-- 插件自行引入 -->
<div id="page"></div>
<script>
    var PAGER = new Pager();
    PAGER.render('#page',
        {'count': total, 'start': start, 'limit': LIMIT, 'max_display': MAX_PAGENUM},
        function (curpage, limit, start) {
            _this.renderTable(curpage, limit, start, ...)
        });
</script>

方案2

主要是使用了vue来构建，但是不是vue项目，所以使用了 httpVueLoader 来加载 pager.vue 组件。

pager.vue 代码如下：

<template>
    <div id="pager" class="layui-box layui-laypage layui-laypage-default">
        <div class="layui-col-md3">
            <span class="layui-laypage-count"> {{total}} 条记录</span>
            <span class="layui-laypage-count">共 {{ Math.ceil(total / limit)}} 页</span>
        </div>
        <div class="layui-col-md9">
            <div class="right">
                <span class="layui-laypage-limits">
                    <select @change="changePagesize" v-model="limit">
                        <option v-for="item, index in limits" :key="index" :value="item"
                                :selected="item === limit ? true : false">{{item}} 条/页</option>
                    </select>
                </span>
                <span class="layui-laypage-skip">
                    到第<input class="layui-input" type="number" min="1" :max="Math.ceil(total / limit)" v-model="curpage"
                             @keyup.enter="changeCurPage">页
                    <button type="button" class="layui-laypage-btn" @click="changeCurPage">确定</button>
                </span>
                <a @click="changePage(index)" :class="item.status" v-for="item,index in pageNums" :key="index">{{item.name}}</a>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                pageNums: [],
                limits: [],
                curpage: 1,
                limit: 0,
                pagenum: 0,
                oldpage: -1,
                oldlimit: -1
            }
        },
        props: {
            total: Number,
            pagesize: Number,
            currentpage: Number,
            maxdisplay: Number
        },
        methods: {
            setPageNums: function () {
                this.pageNums = [];
                var arr = [];
                // 根据 maxdisplay 、  curpage 、total 来组装页码
                this.pagenum = Math.ceil(this.total / this.limit);
                var displayNum = Math.min(this.pagenum, this.maxdisplay);
                // 页码计算
                /**
                 * maxdisplay 表示 显示的页码的最大数量
                 * 页码计算：显示 start = curpage - (displayNum - 1)/2
                 *          end = start + displayNum - 1
                 * 上一页是否可点击：curpage 是否 <= 1
                 * 下一页是否可点击：curpage 是否 >= pagenum
                 */
                var start = this.curpage - parseInt((displayNum - 1) / 2);
                start = start <= 0 ? 1 : start;
                var end = start + displayNum - 1;
                end = end > this.pagenum ? this.pagenum : end;
                if (end === this.pagenum) {
                    start = end - displayNum + 1
                }
                arr.push({
                    num: 'prev',
                    status: this.curpage === 1 ? 'layui-laypage-prev layui-disabled disabled page-item' : 'page-item',
                    name: '上一页'
                });
                if (start - 1 > 0) {
                    arr.push({
                        num: -1,
                        status: 'layui-laypage-spr layui-disabled disabled',
                        name: '...'
                    })
                }
                for (var i = start; i <= end; i++) {
                    arr.push({
                        num: i,
                        status: i == this.curpage ? 'layui-laypage-curr active page-item' : 'page-item',
                        name: i
                    })
                }
                if (end + 1 <= this.pagenum) {
                    arr.push({
                        num: -1,
                        status: 'layui-laypage-spr layui-disabled disabled',
                        name: '...'
                    })
                }
                arr.push({
                    num: 'next',
                    status: this.curpage === this.pagenum ? 'layui-laypage-next layui-disabled disabled page-item' : 'page-item',
                    name: '下一页'
                });
                this.pageNums = arr
                this.changeData()
            },
            setLimits: function () {
                this.limits = []
                var arr = []
                for (var i = 1; i <= 10; i++) {
                    arr.push(i * this.pagesize)
                }
                this.limits = arr
            },
            changePagesize: function () {
                this.curpage = this.currentpage;
                this.setPageNums()
            },
            changeCurPage: function () {
                this.checkPage();
                this.setPageNums()
            },
            changePage: function (index) {
                if (this.pageNums[index].status.indexOf('disabled') === -1) {
                    if (this.pageNums[index].num === 'prev') {
                        for (var i = 0; i < this.pageNums.length; i++) {
                            if (this.pageNums[i].status.indexOf('active') !== -1) {
                                this.curpage = this.pageNums[i].num - 1;
                                break
                            }
                        }
                    } else if (this.pageNums[index].num === 'next') {
                        for (var i = 0; i < this.pageNums.length; i++) {
                            if (this.pageNums[i].status.indexOf('active') !== -1) {
                                this.curpage = this.pageNums[i].num + 1;
                                break
                            }
                        }
                    } else {
                        this.curpage = this.pageNums[index].num
                    }
                    this.checkPage();
                    this.setPageNums()
                }
            },
            checkPage: function () {
                if (this.curpage > this.pagenum) {
                    this.curpage = this.pagenum
                } else if (this.curpage <= 0) {
                    this.curpage = 1
                } else {
                    this.curpage = parseInt(Number(this.curpage))
                }
            },
            changeData: function () {
                if (this.oldpage !== this.curpage || this.oldlimit !== this.limit) {
                    this.oldlimit = this.limit;
                    this.oldpage = this.curpage;
                    this.$emit('change-data', this.curpage, this.limit)
                }
            }
        },
        mounted: function () {
            // 初始化
            this.curpage = this.currentpage || 1;
            this.oldpage = this.currentpage || 1;
            this.limit = this.pagesize || 10;
            this.oldlimit = this.pagesize || 10;
            this.setPageNums();
            this.setLimits()
            // this.changeData()
        },
        // watch: {
        // curpage: function (newV, oldV) {
        //     if (oldV !== newV) {
        //         this.$emit('change-data', newV, this.limit)
        //     }
        // },
        // limit: function (newV, oldV) {
        //     if (newV !== oldV) {
        //         this.$emit('change-data', this.curpage, newV)
        //     }
        // },
        // total: function (newV, oldV) {
        //     if (newV !== oldV) {
        //         this.setPageNums()
        //     }
        // }
        // }
    }
</script>
<style>
    /* global start */
    .right {
        float: right;
    }

    .left {
        float: left;
    }

    /* global end */

    #pager {
        width: 100%;
    }

    .layui-laypage-skip input[type=number]::-webkit-outer-spin-button,
    .layui-laypage-skip input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    .layui-laypage-skip input[type=number] {
        -moz-appearance: textfield;
    }

    #pager .page-item.active {
        background-color: #009688;
        color: #fff;
    }

    #pager .page-item.disabled {
        cursor: not-allowed !important;
        color: #d2d2d2 !important;
    }
</style>

pager.js 代码如下：

Vue.use(httpVueLoader);

var Pager = function () {}
Pager.prototype = {
    /**
     * 渲染 pager
     * @param element 渲染的 div 的 jquery 选择器表示
     * @param pagination 分页器的参数
     * @param getTableData 获取表格数据的函数
     */
    render: function (element, pagination, getTableData) {
        $(element).html('<pager v-cloak :total="total" :pagesize="pagesize" :currentpage="curpage"' +
            ':maxdisplay="maxdisplay" @change-data="getTableData"></pager>')
        new Vue({
            el: element,
            data: function () {
                return {
                    total: pagination.total, // 表格数据总数
                    pagesize: pagination.pagesize, // 当前显示页码数
                    curpage: pagination.curpage, // 每页的数量
                    maxdisplay: pagination.maxdisplay // 最大显示页码数量
                }
            },
            components: {
                // 将组建加入组建库
                'pager': httpVueLoader('../components/pager.vue')  // js 调用的路径需要注意
            },
            methods: {
                /**
                 * 获取数据表数据
                 * @param page 当前显示的页码数
                 * @param limit 每页多少条数据
                 */
                getTableData: function (page, limit) {
                    getTableData(page, limit)
                }
            }
        })
    }
}

使用示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="browser.min.js"></script>
    <script src="polyfill.min.js"></script>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="container">
        <table class="layui-table dataTable">-->
           <thead>
               <tr>
                   <th>col1</th>
                   <th>col2</th>
                   <th>col3</th>
               </tr>
           </thead>
           <tbody id="table">
           </tbody>
       </table>
        <!-- 分页器-->
       <pager v-cloak :total="pagination.total" :pagesize="pagination.pagesize" :currentpage="pagination.curpage"
           :maxdisplay="pagination.maxdisplay" @change-data="getTableData"></pager>
        <div id="pager"></div>
    </div>
    <script type="text/javascript" src="layui/layui.all.js"></script>
    <script type="text/javascript"  src="jquery-2.0.3.min.js"></script>
    <script type="text/javascript"  src="jquery/mustache.js"></script>
    <script type="text/javascript" src="pager.js"></script>
    <script>
    // 使用httpVueLoader
    Vue.use(httpVueLoader);
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                pagination: {
                    total: 199,
                    pagesize: 10,
                    curpage: 1,
                    maxdisplay: 5
                }
            }
        },
        components: {
            // 将组建加入组建库
            'pager': httpVueLoader('pager.vue'),
        },
        methods: {
            getTableData: function (page, limit) {
                // console.log('请求 第' + page + '页的数据,每页是' + limit + '条')
                var start = (page - 1) * limit // 从 0 开始
                // console.log('start : ' + start)
                var data = new FormData()
                data.append('start', start)
                data.append('limit', limit)
                // data.append('searchword', '')
                var _this = this
                axios({
                    method: 'post',
                    url: 'http://localhost:xxxx/xxxxx',
                    data: data
                }).then(function (res) {
                    // 暂时不用 vue 的，
                    var temp =
                        '{{#data}}<tr><td>{{name}}</td><td>{{name}}</td><td>{{id}}</td>' +
                        '<td><a id="{{id}}" class="btn btn-default btn-xs black del">删除</a></td></tr>{{/data}}';
                    var views = Mustache.render(temp, res.data);
                    _this.pagination.total = res.data.count
                    $("#table").html(views);
                })
            }
        }
    })
</script>
    <script type="text/javascript">
        var pager = new Pager()
        pager.render('#pager', {
            total: 100,
            pagesize: 10,
            curpage: 1,
            maxdisplay: 6
        }, function (page, limit) {
            console.log('page: ' + page + ', limit: ' + limit)
        })
    </script>
</body>

</html>

本文作者： jeneen
发布时间： 2021-10-11
最后更新： 2023-05-09
本文标题： 分页器组件的构建
本文链接： https://zx1001011.github.io/2021/10/11/pluginofPager/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！