追风赶月莫停留,平芜尽处是春山。这篇文章主要讲述tp5.1 layui 数据表格 选项卡 同个内容框显示不同的数据列表相关的知识,希望能为你提供帮助。
项目用tp5.1 +
layui 数据表格
模板代码:
<
table id="demo" lay-filter="demo">
<
/table>
<
script type="text/html" id="barDemo">
<
a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">
查看<
/a>
<
a lay-event="edit"class="layui-btn layui-btn-xs" >
编辑<
/a>
<
a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
删除<
/a>
<
/script>
<
script>
layui.use([form,element,table,jquery], function()
var form = layui.form
,element = layui.element
,table = layui.table
,$= layui.$;
//第一个实例
var show_test = function(_type)
alert(_type)
table.render(
elem: #demo
,url: :url(course_dotable) //数据接口
,where: uid: $uid, flid: 2,type:_type
,page: true
,id: idTest
,limits: [10,20,30,60,90,150,300]
,limit: 10 //默认采用60
,cols: [[ //表头
checkbox: true,fixed:left
,type:numbers, title: 序号,width:60,fixed:left
,field: id, title: ID, width:80, sort: true
,field: title, title: 标题
,field: starttime, title: 开始时间, width:180
,field: endtime, title: 结束时间, width:180
,fixed: right, title: 操作,width:210, align:center, toolbar: #barDemo
]]
,initSort:
field: id //排序字段,对应 cols 设定的各字段名
,type: desc //排序方式asc: 升序、desc: 降序、null: 默认排序
,request:
pageName: page //页码的参数名称,默认:page
,limitName: limit //每页数据量的参数名,默认:limit
,done: function(res, page, count)
//如果是异步请求数据方式,res即为你接口返回的信息。
//如果是直接赋值的方式,res即为:data: [], count: 99 data为当前页数据、count为数据总长度
//console.log(res);
//得到当前页码
//console.log(page);
//console.log(limit);
//得到数据总量
//console.log(count);
);
show_test(1);
//监听Tab切换,以改变地址hash值
element.on(tab(test1), function()
show_test(this.getAttribute(lay-id));
//location.hash = type=+ this.getAttribute(lay-id);
//consol.log(this.getAttribute(lay-id))
);
);
<
/script>
重点:
【tp5.1 layui 数据表格 选项卡 同个内容框显示不同的数据列表】控制器代码:
//待上课表/已上课表
public function course_dotable()
$uid=input(uid);
$limit=input(limit);
$page=input(page);
//页数
//$limit=$limit?$limit:10;
$type=input(type);
//搜索分类
$key=input(key);
//搜索关键词
//$this->
assign(limit,$limit);
//$rs=Db::name(live_course)->
where($where)->
order([id=>
desc])->
paginate($limit,false,[query =>
request()->
param()]);
$rs=Db::name(live_course)->
order(id desc)->
limit($limit)->
page($page)->
select();
$rs1=Db::name(live_course)->
select();
$count = count($rs1);
//取得记录集总条数
json(0,数据返回成功,$count,$rs);
//$page = $rs->
render();
//$this->
assign(page, $page);
公共函数
function json($code,$msg="",$count,$data=https://www.songbingjia.com/android/array())
$result=array(
code=>
$code,
msg=>
$msg,
count=>
$count,
data=https://www.songbingjia.com/android/>
$data
);
//输出json
echo json_encode($result);
exit;
推荐阅读
- TP5.1 getLastSql输出查询的SQL语句
- tp5 模板for循环
- TP5.1 分页(带参数传递)
- 6.0 修改会员登录网页中提示文字(“用户名/邮箱/手机”)
- 6.0 保存银联参数出错(Unable to open file)
- 微信公众号支付 获取FORM表单值(无法获取form表单值)
- nginx 配置正向代理
- TP5.1 开启调试 显示浏览时间
- MyBatis从入门到精通—源码剖析之延迟加载源码细节