分页问题
Pagination Problems
我需要有关使用车把在 Node.js 中分页 table 的代码的帮助。
这是路线的代码:
router.get('/profile', isLoggedIn, async (req, res) => {
// Get current page from url (request parameter)
const page_id = parseInt(req.params.page);
const currentPage = page_id > 0 ? page_id : currentPage;
//Change pageUri to your page url without the 'page' query string
pageUri = '/items/';
/*Get total items*/
await pool.query('SELECT COUNT(id) as totalCount FROM user where user_type="Client"', async (err, result,) => {
// Display 10 items per page
const perPage = 10,
totalCount = result[0].totalCount;
// Instantiate Pagination class
const Paginate = new Pagination(totalCount, currentPage, pageUri, perPage);
/*Query items*/
await db.query('SELECT * FROM user LIMIT ' + Paginate.perPage + ' OFFSET ' + Paginate.start, async (err, result) => {
data = {
items: result,
pages: Paginate.links()
}
/* const users = await pool.query('SELECT * FROM database_links.user where user_type="Client"').then;*/
res.render('profile', { data });
});
});
});
这是Pagination.js:
class Pagination{
constructor(totalCount,currentPage,pageUri,perPage=2){
this.perPage = perPage;
this.totalCount =parseInt(totalCount);
this.currentPage = parseInt(currentPage);
this.previousPage = this.currentPage - 1;
this.nextPage = this.currentPage + 1;
this.pageCount = Math.ceil(this.totalCount / this.perPage);
this.pageUri = pageUri;
this.offset = this.currentPage > 1 ? this.previousPage * this.perPage : 0;
this.sidePages = 4;
this.pages = false;
}
links(){
this.pages='<ul class="pagination pagination-md">';
if(this.previousPage > 0)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri + this.previousPage+'">Previous</a></li>';
/*Add back links*/
if(this.currentPage > 1){
for (var x = this.currentPage - this.sidePages; x < this.currentPage; x++) {
if(x > 0)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+'</a></li>';
}
}
/*Show current page*/
this.pages+='<li class="page-item active"><a class="page-link" href="'+this.pageUri+this.currentPage+'">'+this.currentPage+'</a></li>';
/*Add more links*/
for(x = this.nextPage; x <= this.pageCount; x++){
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+' </a></li>';
if(x >= this.currentPage + this.sidePages)
break;
}
/*Display next buttton navigation*/
if(this.currentPage + 1 <= this.pageCount)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+this.nextPage+'">Next</a></li>';
this.pages+='</ul>';
return this.pages;
}
}
module.exports = Pagination;
这是html:
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<table class="table table-dark table-borderless">
<thead>
<tr class="text-center">
<th scope="col">User_ID</th>
<th scope="col">User_Name</th>
<th scope="col">Full Name</th>
<th scope="col">User type</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr class="table-dark text-center">
<th scope="row">{{id}}</th>
<td>{{username}}</td>
<td>{{fullname}}</td>
<td>{{user_type}}</td>
<td class="text-center">
<a href="" class="btn btn-danger btn-sm">Eliminar</a>
<a href="" class="btn btn-secondary btn-sm">Editar</a>
</td>
</tr>
</tbody>
{{else}}
<div class="col-md-4 mx-auto">
<div class="card card-body text-center">
<p>There are not users saved yet</p>
<a href="/clients/add">Create One!</a>
</div>
</div>
{{/each}}
{{ pages }}
</table>
</div>
</div>
这是我从控制台得到的错误:
GET /profile - - ms - -
(node:26172) UnhandledPromiseRejectionWarning: ReferenceError: Cannot access 'currentPage' before initialization
at C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\src\routes\authentications.js:41:49
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:137:13)
at isLoggedIn (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\src\lib\auth.js:5:20)
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\index.js:335:12)
(node:26172) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
您的错误显示 Cannot access 'currentPage' before initialization
。
那是因为您试图在 currentPage
定义之前将其分配回 currentPage
。而不是:
const currentPage = page_id > 0 ? page_id : currentPage;
将你的初始值放入你的三元语句中:
const currentPage = page_id > 0 ? page_id : 0;
...或:
let currentPage = 0;
if (page_id > 0) currentPage = page_id;
我需要有关使用车把在 Node.js 中分页 table 的代码的帮助。
这是路线的代码:
router.get('/profile', isLoggedIn, async (req, res) => {
// Get current page from url (request parameter)
const page_id = parseInt(req.params.page);
const currentPage = page_id > 0 ? page_id : currentPage;
//Change pageUri to your page url without the 'page' query string
pageUri = '/items/';
/*Get total items*/
await pool.query('SELECT COUNT(id) as totalCount FROM user where user_type="Client"', async (err, result,) => {
// Display 10 items per page
const perPage = 10,
totalCount = result[0].totalCount;
// Instantiate Pagination class
const Paginate = new Pagination(totalCount, currentPage, pageUri, perPage);
/*Query items*/
await db.query('SELECT * FROM user LIMIT ' + Paginate.perPage + ' OFFSET ' + Paginate.start, async (err, result) => {
data = {
items: result,
pages: Paginate.links()
}
/* const users = await pool.query('SELECT * FROM database_links.user where user_type="Client"').then;*/
res.render('profile', { data });
});
});
});
这是Pagination.js:
class Pagination{
constructor(totalCount,currentPage,pageUri,perPage=2){
this.perPage = perPage;
this.totalCount =parseInt(totalCount);
this.currentPage = parseInt(currentPage);
this.previousPage = this.currentPage - 1;
this.nextPage = this.currentPage + 1;
this.pageCount = Math.ceil(this.totalCount / this.perPage);
this.pageUri = pageUri;
this.offset = this.currentPage > 1 ? this.previousPage * this.perPage : 0;
this.sidePages = 4;
this.pages = false;
}
links(){
this.pages='<ul class="pagination pagination-md">';
if(this.previousPage > 0)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri + this.previousPage+'">Previous</a></li>';
/*Add back links*/
if(this.currentPage > 1){
for (var x = this.currentPage - this.sidePages; x < this.currentPage; x++) {
if(x > 0)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+'</a></li>';
}
}
/*Show current page*/
this.pages+='<li class="page-item active"><a class="page-link" href="'+this.pageUri+this.currentPage+'">'+this.currentPage+'</a></li>';
/*Add more links*/
for(x = this.nextPage; x <= this.pageCount; x++){
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+x+'">'+x+' </a></li>';
if(x >= this.currentPage + this.sidePages)
break;
}
/*Display next buttton navigation*/
if(this.currentPage + 1 <= this.pageCount)
this.pages+='<li class="page-item"><a class="page-link" href="'+this.pageUri+this.nextPage+'">Next</a></li>';
this.pages+='</ul>';
return this.pages;
}
}
module.exports = Pagination;
这是html:
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<table class="table table-dark table-borderless">
<thead>
<tr class="text-center">
<th scope="col">User_ID</th>
<th scope="col">User_Name</th>
<th scope="col">Full Name</th>
<th scope="col">User type</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{{#each users}}
<tr class="table-dark text-center">
<th scope="row">{{id}}</th>
<td>{{username}}</td>
<td>{{fullname}}</td>
<td>{{user_type}}</td>
<td class="text-center">
<a href="" class="btn btn-danger btn-sm">Eliminar</a>
<a href="" class="btn btn-secondary btn-sm">Editar</a>
</td>
</tr>
</tbody>
{{else}}
<div class="col-md-4 mx-auto">
<div class="card card-body text-center">
<p>There are not users saved yet</p>
<a href="/clients/add">Create One!</a>
</div>
</div>
{{/each}}
{{ pages }}
</table>
</div>
</div>
这是我从控制台得到的错误:
GET /profile - - ms - -
(node:26172) UnhandledPromiseRejectionWarning: ReferenceError: Cannot access 'currentPage' before initialization
at C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\src\routes\authentications.js:41:49
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:137:13)
at isLoggedIn (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\src\lib\auth.js:5:20)
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\layer.js:95:5)
at C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\index.js:281:22
at Function.process_params (C:\Users\hacka\Desktop\Web\Proyect_NodeJs_Mysql\node_modules\express\lib\router\index.js:335:12)
(node:26172) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 4)
您的错误显示 Cannot access 'currentPage' before initialization
。
那是因为您试图在 currentPage
定义之前将其分配回 currentPage
。而不是:
const currentPage = page_id > 0 ? page_id : currentPage;
将你的初始值放入你的三元语句中:
const currentPage = page_id > 0 ? page_id : 0;
...或:
let currentPage = 0;
if (page_id > 0) currentPage = page_id;