layui的数据表单可以实现前台和后台的数据交互。本博客主要记录如何实现后端和前端的数据交互
采用php语言作为后端。
//方法渲染:
table.render({
cols: [[ //标题栏
{checkbox: true}
,{field: 'id', title: 'ID', width: 80}
,{field: 'username', title: '用户名', width: 120}
]]
});
它等价于自动渲染:
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'username', width:180}">用户名</th>
</tr>
</thead>
</table>
如上的两种方式的效果是一样的。
首先看前端的界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<link rel="stylesheet" href="layui-master/src/css/layui.css" />
<script src="layui-master/src/layui.js"></script>
<script src="js/jquery-1.8.3.js"></script>
<script src="layer/layer.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#test'
,height:480//设置容器的高度
,limit:10
,url: 'function.php' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'stunum', title: '学号', width:120, sort: true, fixed: 'left'}
,{field: 'stuname', title: '用户名', width:120}
,{field: 'birth', title: '生日', width:120}
,{field: 'phone', title: '手机', width:120}
,{field: 'email', title: '邮箱', width:120}
,{field: 'work', title: '工作', width:120}
,{field: 'hobby', title: '爱好', width:120}
,{field: 'signature', title: '个性签名', width:120}
,{field: 'address', title: '地址', width:120}
,{field: 'major', title: '专业', width:120}
]]
});
});
</script>
<body>
<table class="layui-hide" id="test" lay-filter="test" style="height: 100%;">
</table>
</body>
</html>
这个html通过对function.php的请求获得数据
界面效果如下:
<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'sex', width:80, sort: true}">性别</th>
<th lay-data="{field:'city'}">城市</th>
<th lay-data="{field:'sign'}">签名</th>
<th lay-data="{field:'experience', sort: true}">积分</th>
<th lay-data="{field:'score', sort: true}">评分</th>
<th lay-data="{field:'classify'}">职业</th>
<th lay-data="{field:'wealth', sort: true}">财富</th>
</tr>
</thead>
</table>
这种写法同样可以
后端的代码如下:
<?php
header("Content-type:text/html;charset=utf-8");
$zhuji="localhost";
$username="root";
$password="root";
$port=3306;
$database="test";
$conn=mysqli_connect($zhuji,$username,$password,$database,$port);
if(!$conn){
echo "数据连接失败";
}
//echo "数据连接成功";
mysqli_query($conn,"set names utf8");//防止数据库乱码
/*
* 分页四要素
* 1.当前页
* 2.每页多少条记录,每页多少条记录要和前台对接好,取名最好为limit
* 3.从数据库读取出多少条记录
* 4.总共多少页
*/
$page=isset($_GET["page"])?$_GET["page"]:1;
$limit=10;
$count=mysqli_num_rows(mysqli_query($conn,"select *from stuinfo"));//获取数据表的信息数量
$perpage=ceil($count/$limit);//获取分页的数量
$sql="select *from stuinfo limit ".($page-1)*$limit.",".$limit;//从数据库中获取的数据
$result=mysqli_query($conn,$sql);//获取数量
if(mysqli_num_rows($result)>0){//如果数据表不为空
echo '{"code":0,"msg":"","count":1000,"data":[';
$i=1;
while($row=mysqli_fetch_assoc($result)){
$i++;
echo json_encode($row);//json格式
if($i<mysqli_num_rows($result)+1){
echo ",";
}
}
echo "]}";
}
?>