Table paging function implemented by Vue2.0+ElementUI+PageHelper
PrefaceI have been working on some front-end projects recently and need to display some tables in pages. There are many ways to paginate a table, which can be divided into physical paging and logical paging from a macro perspective. Since logical paging (i.e. front-end paging) caches all data and then displays them in pages, it will affect the browser speed when the amount of data is large. So after consideration, I used back-end paging. The characteristic of back-end paging is that it requests the data of the current page, and re-sends a request every time the page number changes or the amount of data per page changes. The main technologies used here are as follows:
The backend database uses MySQL, but other databases can also be used because the PageHelper plug-in is compatible with various databases. The essence of PageHelper is to insert an Interceptor to perform paging before the execution of the MyBatis SQL statement, which essentially adds two limit parameters. For the configuration and usage of PageHelper, please refer to the article Spring + Mybatis uses PageHelper plug-in for paging, which will not be repeated here. The front-end uses the recently popular vuejs framework 2.0, which is an mvvm architecture framework, similar to AngularJS, but more lightweight. The UI framework used is the elementUI framework launched by the Ele.me team. This is a vuejs-based framework that perfectly combines with our front-end framework and encapsulates many components, making development very convenient. textBelow is a screenshot of the program. You can see it more clearly by right-clicking and opening the image in a new tab.
Let's take a look at the front-end code. First, the imported files:
<link rel="stylesheet" href="/core/element-ui/lib/theme-default/index.css" rel="external nofollow" >
<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/json2.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/vue-resource.js"></script>
<script src="./element-ui/lib/index.js"></script>The first and last lines are the import packages of ElementUI. You can download the source files from the ElementUI official website or directly use CDN to import them: <!-- Import style --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" > <!-- Import component library--> <script src="https://unpkg.com/element-ui/lib/index.js"></script> The second-to-last line vue-resource is an ajax plug-in for vuejs, which can initiate requests and process responses through XMLHttpRequest or JSONP. Simply put, it can be used to send ajax requests. Next is the style
<style>
.el-select .el-input {
width: 110px;
}
.el-table .info-row {
background: #c9e5f5;
}
#top {
background:#20A0FF;
padding:5px;
overflow:hidden
}
</style>HTML body
<div id="test">
<div id="top">
<span style="float:right;">
<el-button type="text" @click="add" style="color:white">Add</el-button>
<el-button type="text" @click="deletenames" style="color:white">Batch delete</el-button>
</span>
</div>
<br/>
<div style="margin-top:15px">
<el-input placeholder="Please enter content" v-model="criteria" style="padding-bottom:10px;">
<el-select v-model="select" slot="prepend" placeholder="Please select">
<el-option label="id" value="1"></el-option>
<el-option label="name" value="2"></el-option>
</el-select>
<el-button slot="append" icon="search" v-on:click="search"></el-button>
</el-input>
<el-table
ref="testTable"
:data="tableData"
style="width:100%"
border
:default-sort = "{prop: 'id', order: 'ascending'}"
@selection-change="handleSelectionChange"
@row-click="handleclick"
:row-class-name = "tableRowClassName"
>
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
prop="id"
label="Id"
sortable
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="name"
label="Name"
sortable>
</el-table-column>
<el-table-column label="operation">
<template scope="scope">
<el-button
size="small"
type="primary"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
<div align="center">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</div>
</div>
</div>
<footer align="center">
<p>© Vue.js 2.0 + ElementUI paging Demo</p>
</footer>The next step is to create a Vue instance. ES5 is used here.
<script>
var vue = new Vue({
el:"#test",
data: {
//Table current page data tableData: [],
//Multiple selection array multipleSelection: [],
//Requested URL
url:'newstu/querystudentbypage',
//Search criteria: '',
//Drop-down menu options select: '',
//Default page size: 10,
//Default highlighted row data id
highlightId: -1,
//Current page number currentPage: 1,
//Query page number start: 1,
//Default total data totalCount: 1000,
},
methods: {
//Read data from the server loadData: function(criteria, pageNum, pageSize){
this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
this.tableData = res.data.pagestudentdata;
this.totalCount = res.data.number;
},function(){
console.log('failed');
});
},
//Multiple selection response handleSelectionChange: function(val) {
this.multipleSelection = val;
},
//Click row response handleclick: function(row, event, column){
this.highlightId = row.id;
},
//Edit handleEdit: function(index, row) {
this.$prompt('Please enter a new name', 'prompt', {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
}).then(({ value }) => {
if(value==''||value==null)
return;
this.$http.post('newstu/update',{"id":row.id,"name":value},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
}).catch(() => {
});
},
// single row deletion handleDelete: function(index, row) {
var array = [];
array.push(row.id);
this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
},
//Searchsearch: function(){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//addadd: function(){
this.$prompt('Please enter a name', 'prompt', {
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
}).then(({ value }) => {
if(value==''||value==null)
return;
this.$http.post('newstu/add',{"name":value},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
}).catch(() => {
});
},
//Multiple deletions deletenames: function(){
if(this.multipleSelection.length==0)
return;
var array = [];
this.multipleSelection.forEach((item) => {
array.push(item.id);
})
this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
this.loadData(this.criteria, this.currentPage, this.pagesize);
},function(){
console.log('failed');
});
},
//Change the class of the currently clicked row and highlight the current row tableRowClassName: function(row, index){
if(row.id == this.highlightId)
{
return 'info-row';
}
},
//Change the amount of data displayed per page handleSizeChange: function(val) {
this.pagesize = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
//Page number change handleCurrentChange: function(val) {
this.currentPage = val;
this.loadData(this.criteria, this.currentPage, this.pagesize);
},
},
});
//Load data vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
</script>Now let's make a simple explanation of the above code. tableData is an array of data displayed on the current page of the table. When the web page is loaded, the loadData method is executed first. criteria is the current search condition, which is empty by default. The second parameter is the current page number, which is the first page by default. The third parameter is the offset, which is the number you want to query, that is, the amount of data contained in each page. Whenever the page number or the amount of data per page changes, this method will be called again with the new values of these parameters as parameters. Let's take a look at the Controller code:
@ResponseBody
@RequestMapping(value = "/querystudentbypage", method = RequestMethod.GET)
public Map<String, Object> querystudentbypage(@RequestParam(value="parameter")String parameter,
@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize)
{
Page<Student> page = iNewStudentService.selectStudents(parameter, pageNum, pageSize);
Map<String, Object> map = new HashMap<String, Object>();
map.put("pagestudentdata", page);
map.put("number", page.getTotal());
return map;
}ce implementation code:
public Page<Student> selectStudents(String parameter, int pageNum, int pageSize)
{
Page<Student> page = PageHelper.startPage(pageNum, pageSize);
newstudentMapper.selectStudents(parameter);
return page;
}Mybatis code
<select id="selectStudents" resultMap="NewStudentResultMap">
select id,name from student where id=#{parameter} or name like CONCAT('%',#{parameter},'%')
</select>Note: For the sake of simplicity in the code, the user input is fuzzy processed here. The id field in the data table is equal to the user input or the name field contains the user input and can be queried. From the service implementation class and mabatis code above, we can see that we did not manually add limit to the SQL statement, but added Page page = PageHelper.startPage(pageNum, pageSize) before newstudentMapper.selectStudents(parameter); This code is a call to PageHelper. There is no need to worry about how PageHelper is implemented (actually through Interceptor). Only this code is needed to make physical paging. It will work on a SQL query that follows it and return the current page code after paging. Other basic functions of the program include adding, modifying, deleting, batch deleting, etc. The front-end codes have been explained, and the back-end simply calls the database, so the back-end code will not be pasted here. Note: Final wordsAs a front-end control, vuejs has become increasingly popular in recent years. Its community is very active, and there are a large number of open source project libraries to match it. For a detailed list, please refer to the Vue Open Source Project Library Summary. If vuejs is integrated with open source libraries, the efficiency of front-end development will be greatly improved, especially for back-end engineers like me who are not very familiar with the front-end. They can also perform front-end development by referring to the tutorials and examples on the official website. If you use ES6, modularization will be easier. ElementUI is also a very good component library, which has good encapsulation and interfaces for commonly used components such as tables, forms, time and date pickers, etc. PageHelper is a mybatis paging plug-in written by a Chinese. It has very good performance, supports all current mainstream databases, and is very easy to use. What you need to learn for front-end development is not much less than that for back-end development, and it requires more experience accumulation. Here I will record the process of learning front-end development. This is the end of this article about the table paging function implemented by Vue2.0+ElementUI+PageHelper. For more relevant Vue2.0 ElementUI PageHelper table paging content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML Tutorial: Definition List
>>: Solve the problem that changes to the Docker MySQL container database do not take effect
Recommend
Docker containers communicate directly through routing to achieve network communication
Overview As for the current default network of Do...
JavaScript to achieve balance digital scrolling effect
Table of contents 1. Implementation Background 2....
Example of implementing the skeleton screen of WeChat applet
Table of contents What is a skeleton screen How t...
Detailed explanation of cross-usage of Ref in React
Table of contents 1. First, let’s explain what Re...
MySQL slow query: Enable slow query
1. What is the use of slow query? It can record a...
The normal method of MySQL deadlock check processing
Normally, when a deadlock occurs, the connection ...
MySQL 8.0.12 installation and configuration method graphic tutorial (Windows version)
1. Introduction MySQL is used in the project. I i...
Teach you how to create a project using vue-cli3 in five minutes (beginner's guide)
Table of contents 1. Build the Vue environment 2....
Win10+Ubuntu 20.04 LTS dual system installation (UEFI + GPT) (pictures and text, multiple pictures warning)
Win10 installation (skip if already installed) Fo...
Implementation of master-slave replication in docker compose deployment
Table of contents Configuration parsing Service C...
VMware Tools installation and configuration tutorial for Ubuntu
Some time ago, the blogger installed the Ubuntu s...
JavaScript adds event listeners to event delegation in batches. Detailed process
1. What is event delegation? Event delegation: Ut...
Detailed explanation of the use of vue-resource interceptors
Preface Interceptor In some modern front-end fram...
Details on how to use class styles in Vue
Table of contents 1. Boolean 2. Expression 3. Mul...
Detailed explanation of the Docker container lifecycle architecture and the differences between it and VM
Container lifecycle The life cycle of a container...