I have been in contact with the original front-end model before, jquery+bootstrap, complicated dom operations, and cumbersome update binding. After getting involved in vue, I have a new understanding of the front-end MVVM framework. This article is built on webpack+vue. Since the previous work was mainly based on Java server development, the understanding of front-end frameworks and components was not in-depth enough, so it is used to record every bit of the front-end framework usage and construction.
This paging component is developed based on the bottom page of the bootstrap-datatable, and custom functions are added to the relevant parameters.
The final use rendering is as follows, the data comes from cnodejs [https://cnodejs.org/]
The bottom page component is mainly composed of two parts: the current data item number display on the left and the paging page number on the right. The component code is as follows:
<template xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <div> <div> <div> <select v-on:change="menuChange()" v-model="limit"> <option v-for="item in menu" v-bind:value="item">{{item}}</option> </select> Record/page, displaying the {{start}} to {{end}} item records, totaling {{totalSize}} items</div> </div> <div> <ul> <li><a v-on:click="firstClick()" v-bind:class="{ 'disabled': cur == 1}">Home</a></li> <li><a v-on:click="preClick()" v-bind:class="{ 'disabled': cur == 1}">Previous page</a></li> <li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == 1}"> Previous page</a></li> <li v-for="per in pages" v-bind:class="{ 'active': cur == per}"> <a v-on:click="pageClick(per)">{{ per }}</a> </li> <li><a v-on:click="nextClick()" v-bind:class="{ 'disabled': cur == totalPage}">Next page</a></li> <li><a v-on:click="lastClick()" v-bind:class="{ 'disabled': cur == totalPage}">Last page</a></li> <li><a>Total<i>{{totalPage}}</i> pages</a></li> </ul> </div> <div></div> </div></template><script> import Ajax from '../ajax' export default{ props: ['page-model'], data () { return { // Initial page cur: 1, // Request address url: this.pageModel.url ? this.pageModel.url : "", // Request parameters param: this.pageModel.param ? this.pageModel.param : {}, // The request method defaults to GET request method: this.pageModel.method ? this.pageModel.method : 'GET', // The number of displays per page is displayed by default 10 pieces per page limit: this.pageModel.menu ? this.pageModel.menu[0] : 10, // The base page base defaults to 5 perSize: this.pageModel.perSize ? this.pageModel.perSize : 5, // Number of display per page drop-down options menu: this.pageModel.menu ? this.pageModel.menu : [5, 10, 50], // Custom name of pagination parameters pageParamName: this.pageModel.pageParamName ? this.pageModel.pageParamName : ['page', 'limit'], // The current list displays record start: 0, // The current list displays record end: 0, // Total pages totalPage: 0, // Total records totalSize: 0, // The page request returns dataList: [] } }, ready () { this.getData(); }, methods: { // Home page firstClick: function () { if (this.cur > 1) { this.cur = 1; this.getData(); } }, // Last page lastClick: function () { if (this.cur < this.totalPage) { this.cur = this.totalPage; this.getData(); } }, // Previous page preClick: function () { if (this.cur > 1) { this.cur--; this.getData(); } }, // Next page nextClick: function () { if (this.cur < this.totalPage) { this.cur++; this.getData(); } }, // Page number pageClick: function (data) { if (data != this.cur) { this.cur = data; this.getData(); } }, // Refresh the number of records displayed refreshPageCon: function () { this.start = (this.cur - 1) * this.limit + 1; if (this.totalSize >= this.limit * this.cur) { this.end = this.limit * this.cur; } else { this.end = this.totalSize; } }, // Pagination request getData: function () { let _this = this; this.param[this.pageParamName[0]] = this.cur; this.param[this.pageParamName[1]] = this.limit; Ajax({ url: _this.url, method: _this.method, data: _this.param, callback: function (res) { // Return the result dataset this.dataList = res.data; // Return the total number of records_this.totalSize = 25; _this.totalPage = Math.ceil(_this.totalSize / _this.limit); _this.refreshPageCon(); _this.$dispatch('refresh', this.dataList); } }); }, // Show records per page pull-down menuChange: function () { this.getData(); }, getPage: function (curPage, totalPage, pageNum) { var leftPage, rightPage; curPage = curPage > 1 ? curPage : 1; curPage = curPage > totalPage ? totalPage : curPage; totalPage = curPage > totalPage ? curPage : totalPage; // leftPage = curPage - Math.floor(pageNum / 2); leftPage = leftPage > 1 ? leftPage : 1; // rightPage = curPage + Math.floor(pageNum / 2); rightPage = rightPage > totalPage ? totalPage : rightPage; var curPageNum = rightPage - leftPage + 1; // leftPage if (curPageNum < pageNum && leftPage > 1) { leftPage = leftPage - (pageNum - curPageNum); leftPage = leftPage > 1 ? leftPage : 1; curPageNum = rightPage - leftPage + 1; } // Adjust the right side if (curPageNum < pageNum && rightPage < totalPage) { rightPage = rightPage + (pageNum - curPageNum); rightPage = rightPage > totalPage ? totalPage : rightPage; } var arr = []; for (var i = leftPage; i <= rightPage; i++) { arr.push(i); } return arr; } }, computed: { pages: function () { return this.getPage(this.cur, this.totalPage, this.perSize); } } } }</script><style> ul, li { margin: 0px; padding: 0px; } li { list-style: none; display: inline; } .page-bar li:first-child > a { margin-left: 0px } .page-bar a { border: 1px solid #ddd; text-decoration: none; position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; cursor: pointer; } .page-bar a:hover { background-color: #eee; } .page-bar .active a { color: #fff; cursor: default; background-color: #337ab7; border-color: #337ab7; } .page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 12px; } .page-bar .page-con, .page-size { width: 50%; display: block; height: 30px; float: left; line-height: 30px; } .page-bar .page-con ul { float: right; padding-left: 15px; padding-right: 15px; display: inline-block; padding-left: 0; } .page-bar .page-size div { padding-left: 15px; padding-right: 15px; font-size: 14px; } a.disabled { color: #777; background-color: #fff; border-color: #ddd; cursor: not-allowed; } a.disabled:hover { background-color: #fff; } .clear-both { clear: both; } select { border: solid 1px #ddd; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("../assets/images/arrow.png") no-repeat scroll right center transparent; padding-right: 15px; padding-left: 15px; padding-top: 2px; padding-bottom: 2px; } select::-ms-expand { display: none; }</style>Use modules,
<template> <Navbar></Navbar> <div> <table> <tread> <tr> <th>Title</th> <th>Publish time</th> <th>Author</th> <th>Number of replies</th> <th>Number of visits</th> </tr> </tbody> <ttr v-show="!tabelEmpty" v-for="item in dataList"> <td>{{item.title}}</td> <td>{{item.create_at}}</td> <td>{{item.author.loginname}}</td> <td>{{item.reply_count}}</td> <td>{{item.visit_count}}</td> </tr> <tr> v-show="tabelEmpty"> <td colspan="5">No matching record</td> </tr> </tbody> </table> </div> <Pagebar :page-model="pageModel"></Pagebar></template><script> import Navbar from '../components/navbar.vue' import Pagebar from '../components/table-pagebar.vue' export default {//This is the official writing method, the default export, ES6 components: { Navbar, Pagebar }, data () { return { allArticle: "", dataList: [], pageModel: { url: 'https://cnodejs.org/api/v1/topics', menu: [5, 10, 20] }, } }, computed: { tabelEmpty: function () { if (this.dataList) { return false; } else { return true; } } }, events: { refresh: function (e) { this.dataList = e; } } } }</script><style> body, table { font-size: 12px; } table { table-layout: fixed; empty-cells: show; border-collapse: collapse; width: 100%; margin: 10px 0; } td { height: 30px; } div.row { margin-left: 15px; margin-right: 15px; } h1, h2, h3 { font-size: 12px; margin: 0; padding: 0; } .table { border: 1px solid #ddd; background: #fff; } .table thead tr { background: #eee; } .table th { background-repeat: repeat-x; height: 30px; text-align: left; vertical-align: middle; } .table tr.empty { text-align: center; } .table td, .table th { border: 1px solid #ddd; padding: 0 1em 0; } .table tr:nth-child(odd) td { background-color: #f5f5f5; }</style>This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.