layui的table数据表格实现完全的前端分页（其实它自带分页，但是后台不想写，数据量也不大）
最近因为一些原因，做的项目需要用到前端分页。于是在layui的数据表格原有的分页的基础上，
硬生生地用了前端分页。数据量也不大，所以才敢用。效果就是下边这样。
html代码：（需要引的js、css路径注意自己改一下）
<html>
<head>
<meta charset="utf-8">
<title>用户信息页面title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/font_eolqem241z66flxr.css" media="all" />
<link rel="stylesheet" href="../../css/sensor.css" media="all" />
<script type="text/javascript" src="../../layui/layui.js">script>
<script type="text/javascript" src="1.js">script>
head>
<body>
<table class="layui-hide" id="test" lay-filter="test">table>
<div id="page">div>
body>
html>
js代码：
layui.use(['table','jquery'], function(){
var table = layui.table,
$ = layui.jquery;
table.render({
elem: '#test' ,
url: '../../json/userList.json',
method: 'get',
request: {
limitName: 'rows', //每页数据量的参数名，默认：limit
pageName: 'page',
},
where: {
},
cols : [ [ {
field : 'zizeng',
title : '编号',
align : 'center',
type : 'numbers'
}, {
field : 'username',
title : '用户代码',
filter : false,
align : 'center'
}, {
field : 'real_name',
title : '用户名称',
filter : true,
align : 'center'
}, {
field : 'account_type',
title : '用户等级',
filter : false,
align : 'center',
templet:function(d){
if(d.account_type == 0 )
return '管理员';
else if(d.account_type == 1)
return '普通用户';
else
return '未定义';
}
}, {
field : 'create_time',
title : '创建日期',
align : 'center'
}, {
field : 'login_time',
title : '最近登陆日期',
align : 'center'
},{
field : 'a',
title : '操作',
toolbar : '#barDemo',
align : 'center'
} ] ],
response: {
statusName: 'result', //数据状态的字段名称，默认：code
statusCode: 200, //成功的状态码，默认：0
dataName: 'rows', //数据列表的字段名称，默认：data
countName: 'total',//规定数据总数的字段名称，默认：count
},
page: true,
parseData: function(res){
var dataList = res.data;
var total = res.count; //请求的数据总数
var list = []; //用来保存当前页显示的数据
//前端模拟分页，获取当前页、分页显示数据量
var page = $("#layui-table-page1").find(".layui-laypage-em").next().html();
var limit = $("#layui-table-page1").find(".layui-laypage-limits select").val();
console.log(page + ", " + limit);
if(page == undefined || page == null || page == ""){
page = 1;
}
if(limit == undefined || limit == null || limit == ""){
limit = 10;
}
//数据从哪条数据开始
var start = (page-1) * limit;
//数据从哪条数据结束
var end = page * limit;
if(end > total){
end = total;
}
//取分页数据
for(var i=start; ijson文件如下：
{"code":0,
"msg":"success",
"count":11,
"data":
[{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
},
{
"id":7,
"account_type":"0",
"username":"wc",
"create_time" : "2020-02-29 14:39:00",
"real_name":"Jimmy",
"login_time":"2020-02-29 14:39:00"
}]
}
这样子就实现前端分页了，完美。