html代码如下
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/demo/php/select.php'
,method:'post'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
,limit: 10
,limits: [10, 20, 30]
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips',
}]
,title: '用户数据表'
,cols: [[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'username', title:'用户名', width:120, edit: 'text'}
,{field:'age', title:'年龄', width:120, edit: 'text'}
,{field:'sex', title:'性别', width:120, edit: 'text'}
,{field:'phonenumber', title:'电话号码', width:120, edit: 'text'}
]]
,page: true
,parseData: function (res) {
var data = {
"code": 0, //解析接口状态
"msg": res.message, //解析提示文本
"count":res.total, //解析数据长度 //这里是总数量
"data": res.data.item //解析数据列表 这里的data即是渲染到表格中的数据, 因为我传过来的json数据是list作为key值的,所以这里是个list 根据你自己的json数据进行更改
};
分页是后端实现的,你的select.php方法里面有没有接收page和limit参数去实现分页查询数据?
如果你需要前端分页的话,就先用ajax查询出数据,然后再table.render(不给url,直接给data赋值)
<?php
$servername = "localhost";
$username = "admin";
$password = "123456";
$dbname = "admin";
// 创建连接
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect($servername,$username,$password,$dbname);
// Check connection
if (!$link) {
die("连接失败: " . mysqli_connect_error());
}
$sql = "SELECT * FROM test3";
$result = mysqli_query($link, $sql);
class User
{
public $id;
public $username;
public $age;
public $sex;
public $phonenumber;
}
if($result){
//echo "查询成功";
while ($row = mysqli_fetch_array($result))
{
$user = new User();
$user->id = $row["id"];
$user->username = $row["username"];
$user->age = $row["age"];
$user->sex = $row["sex"];
$user->phonenumber = $row["phonenumber"];
$data[]=$user;
}
$json = json_encode($data);//把数据转换为JSON数据.
echo '{"code":0,"data":'.$json.'}';
}else{
echo "查询失败";
}
?>
那么我是需要增加一个$_POST来获取前端页面参数吗
...
$page = $_POST['page'];
$limit = $_POST['limit'];
$lit = ($page-1)*$limit.",".$limit;//数据分页
$sql = "SELECT * FROM test3 limit ".$lit;
...
$page = $_POST['page'];
$limit = $_POST['limit'];
$lit = ($page-1)*$limit.",".$limit;//数据分页
$sql = "SELECT * FROM test3 limit ".$lit;
$sql_count = "SELECT COUNT(*) FROM test3";
...
echo '{"code":0,"msg":"success","count": '.$sql_count.', "data":'.$json.'}';
...
table.render({
}),
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": res.data//解析数据列表
};
};
你要按照layui接收的规定返回值,你返回了啥他就有啥的
这种问题,你直接到官网找到分页源码即可。具体数据由后台填充