需要運用到mysql裏面的limit實現分頁操作
1.封裝mysql爲db.js文件
var mysql = require('mysql')
exports.base=(sql,data,callback)=>{
var mysql= require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '1234',
database : 'mall',
post:3306
});
connection.connect();
connection.query(sql,data, function (error, results, fields) {
if (error) throw error;
callback(results)
});
connection.end();
}
2.index.js代碼
let express=require('express');
let template=require('art-template');
let app=express();
let path=require('path');
// 引入封裝好的數據庫操作
let db=require('./service/db');
// 靜態資源路徑
app.use(express.static(path.join(__dirname,'public')));
// 設置模板路徑
app.set('views',path.join(__dirname,'views'));
// 設置模版引擎
app.set('view engine','html');
// express-art-template
app.engine('html',require('express-art-template'));
// 路由
app.get('/',(req,res)=>{
// 獲取get後面的page參數值； 沒有page的參數值的時候，給它默認值0
let page=(req.query.page==undefined)?0:req.query.page;
let startPage=page*5;
// 從數據庫獲取數據，然後渲染到show頁面
let count='select count(*) as count from student';
let sql=`select id,name,if(sex=1,'男','女') as sex,tel,school,major from student limit ${startPage},5`;
db.base(count,null,(result)=>{
let countNum=result[0].count;
db.base(sql,null,(result)=>{
res.render('show',{list:result,count:countNum,page:page});
})
})
})
// 監聽端口
app.listen(8080,()=>console.log('runnning'));
3.index.html代碼
<body>
<table border='1' cellspacing='0' cellpadding='5'>
<tr>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
<th>學校</th>
<th>專業</th>
</tr>
{{each list}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.sex}}</td>
<td>{{$value.tel}}</td>
<td>{{$value.school}}</td>
<td>{{$value.major}}</td>
</tr>
{{/each}}
</table>
<span id='prev'>上一頁</span>
<span id='pages'></span>
<span id='next'>下一頁</span>
</body>
<script>
var count={{count}};// 總條數
var page={{page}}; // 當前的頁碼
// 獲取頁面的位置
var pages=document.getElementById('pages');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
// 生成頁碼 22=>5
function createPages() {
pages.innerHTML='';
for(var i=0;i<Math.ceil(count/5);i++){
pages.innerHTML+=`<button class="btn" json-page="${i}">${i+1}</button>`;
}
}
createPages()
// 點擊按鈕翻頁
$('.btn').on('click',function(){
let page=$(this).attr('json-page');
window.location.href='/?page='+page;
})
// 點擊上一頁
prev.onclick=function(){
if(page>=1){
page--;
window.location.href='/?page='+page;
}
}
// 點擊下一頁
next.onclick=function(){
if(page<Math.ceil(count/5)-1){
page++;
window.location.href='/?page='+page;
}
}
</script>
實現後結果如下：
