Thinkphp6学习（14）+layui表格分页与搜索显示
在昨天的基础上进行再学习，本节主要学习了layui的表格重载与如何传递数据给thinkphp,
====前端代码====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui数据表格接口</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<style>
body {
padding-top: 50px;
}
h2 {
text-align: center;
margin-bottom: 30px;
}
#box {
width: 80%;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>layui数据表格 使用</h2>
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">班别</label>
<div class="layui-input-inline">
<input type="text" name="searchContent" id="companyName" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" style="margin-top: -6px;" id="searchCompany" data-type="reload">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
</button>
</div>
</div>
</div>
<!-- <div id="box"> -->
<div class="layui-card-body" style="padding: 15px;">
<table id="demo" lay-filter="test"></table>
</div>
<!-- </div> -->
<script>
layui.use(['table','laypage','jquery'], function(){
var table = layui.table
,laypage=layui.laypage
,=layui.;
//第一个实例
table.render({
elem: '#demo'
,url: '{:url("index.php/dbtest/laylist")}' //数据接口
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,limit:10 //一页显示多少条
,limits:[10,20]//每页条数的选择项
,groups: 2 //只显示 2 个连续页码
,first: "首页" //不显示首页
,last: "尾页" //不显示尾页
}
,cols: [[ //表头
{field: 'id', title:'ID'}
,{field: 's_clas', title: '班级'}
,{field: 's_numb', title: '学号'}
,{field: 's_name', title: '姓名'}
,{field: 's_chin', title: '语文'}
,{field: 's_math', title: '数学'}
,{field: 's_engl', title: '英语'}
,{field: 's_poli', title: '政治'}
,{field: 's_hist', title: '历史'}
,{field: 's_phys', title: '物理'}
,{field: 's_chem', title: '化学'}
,{field: 's_spor', title: '体育'}
,{field: 's_tota', title: '总分'}
,{field: 's_bjmc', title: '班名次'}
,{field: 's_jmc', title: '级名次'}
,{field: 's_town', title: '镇名次'}
,{field: 's_near', title: '上次名次'}
,{field: 's_prog', title: '进步'}
]]
});
//搜索加载--数据表格重载
var active = {
reload: function () {
var searchContent = $("#companyName").val();//搜索框内容
//执行重载
table.reload('demo', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
searchContent: searchContent//作为参数传递给后端php
}
});
}
};
$('#searchCompany').on('click', function () {
var type = $(this).data('type');//自定义type属性，这里即为reload
active[type] ? active[type].call(this) : ''; //如果存在active[type]，则调用改函数
});
});
</script>
</body>
</html>
====html重点====
====js重点====
====后端代码====
====效果图====
腾讯云开发者
