\u5206\u9875\u662fWEB\u5f00\u53d1\u4e2d\u5f88\u5e38\u7528\u7684\u529f\u80fd\uff0c\u5c24\u5176\u662f\u5728\u5404\u79cd\u524d\u540e\u7aef\u5206\u79bb\u7684\u4eca\u5929\uff0c\u540e\u7aefAPI\u8fd4\u56de\u6570\u636e\uff0c\u524d\u7aef\u6839\u636e\u6570\u636e\u7684count<\/code>\u4ee5\u53ca\u5f53\u524d\u9875\u7801pageIndex<\/code>\u6765\u8ba1\u7b97\u5206\u9875\u9875\u7801\u5e76\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u5df2\u7ecf\u662f\u4e00\u4e2a\u5f88\u666e\u901a\u5f88\u5e38\u89c1\u7684\u529f\u80fd\u4e86\u3002\u4ece\u6700\u5f00\u59cb\u7684jquery<\/code>\u65f6\u4ee3\u5230\u73b0\u5728\u7684\u5404\u79cd\u5404\u6837\u7684\u524d\u7aef\u6846\u67b6\u65f6\u4ee3\uff0c\u5206\u9875\u529f\u80fd\u90fd\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002
\n\u5206\u9875\u5927\u591a\u6570\uff08\u57fa\u672c\u4e0a\uff09\u60c5\u51b5\u4e0b\u90fd\u662f\u5bf9\u5f02\u6b65\u6570\u636e\u5217\u8868\u7684\u5904\u7406\uff0c\u8fd9\u91cc\u9996\u5148\u9700\u8981\u660e\u767d\u4e00\u4e0b\u5206\u9875\u7684\u6d41\u7a0b\u3002
\n\u5728\u5df2\u77e5\u6bcf\u9875\u663e\u793a\u6570\u636e\u91cfpageSize<\/code>\u4ee5\u53ca\u5f53\u524d\u9875\u7801pageIndex<\/code>\u7684\u60c5\u51b5\u4e0b\uff1a<\/p>\n\n\n

\u8bf7\u6c42API\uff0c\u8fd4\u56de\u7b2c\u4e00\u5c4f\u6570\u636e\uff08pageSize<\/code>\u5185\uff09\u4ee5\u53ca\u6240\u6709\u76f8\u5173\u6761\u4ef6\u7684\u6570\u636e\u603b\u91cfcount<\/code><\/li>\n\u5c06\u6570\u636e\u603b\u91cf\u4f20\u9012\u7ed9page<\/code>\u7ec4\u4ef6\uff0c\u6765\u8ba1\u7b97\u9875\u7801\u5e76\u6e32\u67d3\u5230\u9875\u9762\u4e0a<\/li>\n\u70b9\u51fb\u9875\u7801\uff0c\u53d1\u9001\u8bf7\u6c42\u83b7\u53d6\u8be5\u9875\u7801\u7684\u6570\u636e\uff0c\u8fd4\u56de\u6570\u636e\u603b\u91cfcount<\/code>\u4ee5\u53ca\u8be5\u9875\u7801\u4e0b\u7684\u6570\u636e\u6761\u76ee\u3002<\/li>\n<\/ul>\n\n

\u7531\u4e8e\u83b7\u53d6\u6570\u636e\u6761\u4ef6\u7684\u53d8\u5316\uff08\u5047\u8bbe\u662f\u4e2a\u641c\u7d22\uff0c\u5173\u952e\u8bcd\u53d8\u4e86\uff09\uff0ccount<\/code>\u662f\u4e0d\u5b9a\u7684\uff1b\u518d\u6216\u8005\uff0c\u6709\u4e2aselect<\/code>\u4e0b\u62c9\u6846\uff0c\u6765\u63a7\u5236\u6bcf\u9875\u663e\u793a\u7684\u6570\u636e\u91cfpageSize<\/code>\uff0c\u5f53\u5b83\u53d8\u5316\u7684\u65f6\u5019\uff0c\u603b\u9875\u7801\u80af\u5b9a\u4e5f\u662f\u8981\u53d8\u5316\u7684\u3002\u56e0\u6b64\u5f88\u591a\u60c5\u51b5\u4e0b\u8981\u91cd\u65b0\u8ba1\u7b97\u9875\u7801\u5e76\u6e32\u67d3\u3002<\/p>\n

\u4e86\u89e3\u4e86\u6d41\u7a0b\uff0c\u5728Vue\u4e2d\u5b9e\u73b0\u4e00\u4e2a\u5206\u9875\u7ec4\u4ef6\u4e5f\u5c31\u53d8\u5f97\u7b80\u5355\u4e86\u3002<\/p>\n

\u7b80\u5355\u5904\u7406\uff0c\u6837\u5f0f\u7c7b\u4f3c\u4e8ebootstrap<\/code>\u7684\u5206\u9875\u7ec4\u4ef6\uff0c\u5728\u7b2c\u4e00\u9875\u65f6\uff0c\u7981\u7528\u4e0a\u4e00\u9875\uff0c\u4ee5\u53ca\u9996\u9875\u6309\u94ae\uff1b\u5728\u6700\u540e\u4e00\u9875\u65f6\uff0c\u7981\u7528\u4e0b\u4e00\u9875\uff0c\u4ee5\u53ca\u5c3e\u9875\u6309\u94ae\uff1b\u8d85\u51fa\u8303\u56f4\u7684\u9875\u7801\u4ee5...<\/code>\u6765\u4ee3\u66ff\uff0c\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/p>\n

\u5206\u9875\u7ec4\u4ef6<\/h3>\n

template<\/h4>\n

<template>\n <ul class=\"mo-paging\">\n <!-- prev -->\n <li\n :class=\"['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]\"\n @click=\"prev\">prev<\/li>\n\n <!-- first -->\n <li\n :class=\"['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]\"\n @click=\"first\">first<\/li>\n\n <li\n :class=\"['paging-item', 'paging-item--more']\"\n v-if=\"showPrevMore\">...<\/li>\n\n <li\n :class=\"['paging-item', {'paging-item--current' : index === pager}]\"\n v-for=\"pager in pagers\"\n @click=\"go(pager)\">{{ pager }}<\/li>\n\n <li\n :class=\"['paging-item', 'paging-item--more']\"\n v-if=\"showNextMore\">...<\/li>\n\n <!-- last -->\n <li\n :class=\"['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]\"\n @click=\"last\">last<\/li>\n\n <!-- next -->\n <li\n :class=\"['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]\"\n @click=\"next\">next<\/li>\n <\/ul>\n<\/template><\/code><\/pre>\n

style(scss)<\/h4>\n

.mo-paging {\n display: inline-block;\n padding: 0;\n margin: 1rem 0;\n font-size: 0;\n list-style: none;\n user-select: none;\n > .paging-item {\n display: inline;\n font-size: 14px;\n position: relative;\n padding: 6px 12px;\n line-height: 1.42857143;\n text-decoration: none;\n border: 1px solid #ccc;\n background-color: #fff;\n margin-left: -1px;\n cursor: pointer;\n color: #0275d8;\n &:first-child {\n margin-left: 0;\n }\n &:hover {\n background-color: #f0f0f0;\n color: #0275d8;\n }\n &.paging-item--disabled,\n &.paging-item--more{\n background-color: #fff;\n color: #505050;\n }\n \/\/\u7981\u7528\n &.paging-item--disabled {\n cursor: not-allowed;\n opacity: .75;\n }\n &.paging-item--more,\n &.paging-item--current {\n cursor: default;\n }\n \/\/\u9009\u4e2d\n &.paging-item--current {\n background-color: #0275d8;\n color:#fff;\n position: relative;\n z-index: 1;\n border-color: #0275d8;\n }\n }\n}<\/code><\/pre>\n

javascript<\/h4>\n

export default {\n name : 'MoPaging',\n \/\/\u901a\u8fc7props\u6765\u63a5\u53d7\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u503c\n props : {\n\n \/\/\u9875\u9762\u4e2d\u7684\u53ef\u89c1\u9875\u7801\uff0c\u5176\u4ed6\u7684\u4ee5...\u66ff\u4ee3, \u5fc5\u987b\u662f\u5947\u6570\n perPages : { \n type : Number,\n default : 5 \n },\n\n \/\/\u5f53\u524d\u9875\u7801\n pageIndex : {\n type : Number,\n default : 1\n },\n\n \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\n pageSize : {\n type : Number,\n default : 10\n },\n\n \/\/\u603b\u8bb0\u5f55\u6570\n total : {\n type : Number,\n default : 1\n },\n\n },\n methods : {\n prev(){\n if (this.index > 1) {\n this.go(this.index - 1)\n }\n },\n next(){\n if (this.index < this.pages) {\n this.go(this.index + 1)\n }\n },\n first(){\n if (this.index !== 1) {\n this.go(1)\n }\n },\n last(){\n if (this.index != this.pages) {\n this.go(this.pages)\n }\n },\n go (page) {\n if (this.index !== page) {\n this.index = page\n \/\/\u7236\u7ec4\u4ef6\u901a\u8fc7change\u65b9\u6cd5\u6765\u63a5\u53d7\u5f53\u524d\u7684\u9875\u7801\n this.$emit('change', this.index)\n }\n }\n },\n computed : {\n\n \/\/\u8ba1\u7b97\u603b\u9875\u7801\n pages(){\n return Math.ceil(this.size \/ this.limit)\n },\n\n \/\/\u8ba1\u7b97\u9875\u7801\uff0c\u5f53count\u7b49\u53d8\u5316\u65f6\u81ea\u52a8\u8ba1\u7b97\n pagers () {\n const array = []\n const perPages = this.perPages\n const pageCount = this.pages\n let current = this.index\n const _offset = (perPages - 1) \/ 2\n\n const offset = {\n start : current - _offset,\n end : current + _offset\n }\n\n \/\/-1, 3\n if (offset.start < 1) {\n offset.end = offset.end + (1 - offset.start)\n offset.start = 1\n }\n if (offset.end > pageCount) {\n offset.start = offset.start - (offset.end - pageCount)\n offset.end = pageCount\n }\n if (offset.start < 1) offset.start = 1\n\n this.showPrevMore = (offset.start > 1)\n this.showNextMore = (offset.end < pageCount)\n\n for (let i = offset.start; i <= offset.end; i++) {\n array.push(i)\n }\n\n return array\n }\n },\n data () {\n return {\n index : this.pageIndex, \/\/\u5f53\u524d\u9875\u7801\n limit : this.pageSize, \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\n size : this.total || 1, \/\/\u603b\u8bb0\u5f55\u6570\n showPrevMore : false,\n showNextMore : false\n }\n },\n watch : {\n pageIndex(val) {\n this.index = val || 1\n },\n pageSize(val) {\n this.limit = val || 10\n },\n total(val) {\n this.size = val || 1\n }\n }\n}<\/code><\/pre>\n

\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h3>\n

<template>\n <div class=\"list\">\n <template v-if=\"count\">\n <ul>\n <li v-for=\"item in items\">...<\/li>\n <\/ul>\n <mo-paging \n :page-index=\"currentPage\" \n :total=\"count\" \n :page-size=\"pageSize\" \n @change=\"pageChange\">\n <\/mo-paging>\n <\/template>\n <\/div>\n<\/template>\n<script>\n import MoPaging from '.\/paging'\n export default {\n \/\/\u663e\u793a\u7684\u58f0\u660e\u7ec4\u4ef6\n components : {\n MoPaging \n },\n data () {\n return {\n pageSize : 20 , \/\/\u6bcf\u9875\u663e\u793a20\u6761\u6570\u636e\n currentPage : 1, \/\/\u5f53\u524d\u9875\u7801\n count : 0, \/\/\u603b\u8bb0\u5f55\u6570\n items : []\n }\n },\n methods : {\n \/\/\u83b7\u53d6\u6570\u636e\n getList () {\n \/\/\u6a21\u62df\n let url = `\/api\/list\/?pageSize=${this.pageSize}&currentPage=${this.currentPage}`\n this.$http.get(url)\n .then(({body}) => {\n\n \/\/\u5b50\u7ec4\u4ef6\u76d1\u542c\u5230count\u53d8\u5316\u4f1a\u81ea\u52a8\u66f4\u65b0DOM\n this.count = body.count\n this.items = body.list\n })\n },\n\n \/\/\u4ecepage\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u5f53\u524dpage\n pageChange (page) {\n this.currentPage = page\n this.getList()\n }\n },\n mounted() {\n \/\/\u8bf7\u6c42\u7b2c\u4e00\u9875\u6570\u636e\n this.getList()\n } \n }\n<\/script><\/code><\/pre>