记录一下最近写的代码 从中抠出分页的部分。
html页
- 使用table模块时 当page 模块开启时 ,访问接口(url)时,会自动添加 page(页码) 和 limit(分页大小)属性,不必手动发送
- 如果要传递参数的话 写到 where:属性里
- 更多属性 请看官方文档:luyui 数据表格文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../static/layui/css/layui.css">
</head>
<style>
body {
margin: 10px;
}
</style>
<body>
<table id="demo" class="layui-hide" lay-filter="test"></table>
<script src="../../static/layui/layui.js"></script>
<script type="text/html" id="barDemo">
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> -->
<a class="layui-btn layui-btn-xs" lay-event="edit">恢复</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use(['table', 'form', 'layer', 'jquery', "element", "laytpl", "laypage"], function () {
var table = layui.table;
var layer = parent.layer === undefined ? layui.layer : parent.layer;
var form = layui.form;
var $ = layui.jquery;
var element = layui.element;
var laytpl = layui.laytpl;
var laypage = layui.laypage
//第一个实例
var bloglist = function () {
table.render({
elem: '#demo'
, url: 'http://localhost:3000/article/linkage' //数据接口 获取数据
, method: 'post'
, contentType: 'application/json'
, where: {}
, page: {limits:[5,10,15]}//开启分页
, toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板
// , totalRow: true //开启合计行
, cols: [[ //表头
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
, { field: 'title', title: '博客标题' }
, { field: 'pub_date', title: '载入时间', width: 250, sort: true }
, { field: 'authour_id', title: '作者账户' }
, { field: 'cate_id', title: '所属类别' }
, { field: 'state', title: '发布状态' }
, {
field: 'is_delete', title: '状态', templet: function (d) {
return d.is_delete * 1 ? "已删除" : "未删除";
}
}
, { fixed: 'right', width: 195, align: 'center', toolbar: '#barDemo' }
]]
, skin: 'row', even: true
});
}
bloglist();
//监听Tab切换
element.on('tab(demo)', function (data) {
layer.tips('切换了 ' + data.index + ':' + this.innerHTML, this, {
tips: 1
});
});
//监听头工具栏事件
table.on('toolbar(test)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id)
, data = checkStatus.data; //获取选中的数据
switch (obj.event) {
case 'add':
layer.msg('添加');
break;
case 'update':
if (data.length === 0) {
layer.msg('请选择一行');
} else if (data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]:' + checkStatus.data[0].id);
}
break;
case 'delete':
if (data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
//监听行工具事件
table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
var title = obj.data.title;
if (layEvent === 'detail') {
//查看逻辑
} else if (layEvent === 'del') {
//删除数据 逻辑
} else if (layEvent === 'edit') {
//恢复数据
}
});
</script>
</body>
</html>
服务端就处理数据
注意两点
- SELECT SQL_CALC_FOUND_ROWS * from article limit ?,? SELECT
FOUND_ROWS() as counts 此时,在执行第一条语句时就会缓存总记录数,并在FOUND_ROWS()后返回。 - layui有返回数据格式要求{ code: “0”, msg: “”,data: result ,count :total[0].counts}
exports.linkage = (req, res) => {
var pagesize = req.body.limit;
var page = req.body.page||1;
var m = (page - 1) * pagesize
var n = pagesize;
var sql = "SELECT SQL_CALC_FOUND_ROWS * from article limit ?,? "
var sqlParams = [m,n];
db.query(sql, sqlParams, function (err, result) {
if (err) throw err;
var sql1 = "SELECT FOUND_ROWS() as counts" //查询总数
db.query(sql1,function(err, total) {
if (err) throw err;
console.log(total);
res.json({ code: "0", msg: "",data: result ,count :total[0].counts}); //
});
});
}