js部分
layui.use(['element', 'table', 'form', 'jquery', 'laydate'], function () {
var table = layui.table;
var form = layui.form;
方法渲染表格开始///
table.render({
elem: '#tableId',
url: '/product/list', (此处的url用于自动渲染和重载)
page: true,
even: true,
toolbar: true,
//注意(重点)
parseData: function(res) { //res 即为原始返回的数据
return {
"code":'0', //解析接口状态
"msg": res.message, //解析提示文本
"count":res.total, //解析数据长度
"data": res.data //解析数据列表
}
}
,id: 'testReload',
cols: [[
{type: 'checkbox'},
{field: 'pro_id', title: 'ID', width: 80, sort: true,align: 'center'},
{field: 'pro_name', title: '商品名称', width: 350},
{field: 'pro_num', title: '销售量', width: 100,sort: true,align:'center'},
{field: 'pro_price', title: '价格', width: 100,sort: true,align:'center'},
{field: 'cate_id', title: '类型', width: 80,align:'center'},
{field: 'pro_ctime', title: '添加时间', width: 200},
// {field: 'pro_status', title: '状态', width: 80, templet: '#statusTpl',align:'center'},
{field: 'pro_status', title: '状态', width: 130,templet: function(d){ //自定义显示内容(模板)
var timeDate = d.pro_utime;
var Time = new Date(timeDate);
var timestemp = Time.getTime();//数据库中的上架时间
var timestamps = Date.parse(new Date());
timestamps = timestamps / 1000;
if ((timestemp/1000) < timestamps ){
var strCheck = d.pro_status == "1" ? "checked" : "";
return '<input type="checkbox" name="status" lay-filter="status" lay-skin="switch" lay-text="上架|下架" ' +strCheck+ ' pro_id='+d.pro_id+'>';
}else {
var strCheck ="";
return '<input type="checkbox" name="status" lay-filter="status" lay-skin="switch" lay-text="上架|下架" ' +strCheck+ ' pro_id='+d.pro_id+'>';
}
}
},
{title: '操作', width: 250, toolbar: '#barDemo', align: 'center'}
]],
done: function (res, curr, count) {
$("#countNum").text(count);
}
});
/搜索(数据的重载)///
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('testReload', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
pro_id: demoReload.val()
}
});
}
};
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
html部分
<div class="demoTable">
搜索ID:
<div class="layui-inline">
<input class="layui-input" name="pro_id" id="demoReload" autocomplete="off" />
</div>
<button type="button" class="layui-btn" data-type="reload">搜索</button>
</div>
php后台:
/**
* 获取商品信息
*/
public function list(Request $request){
//$limit获取每页数量
$limit=$request->get('limit');//前端Layui 传过来分页标准
//前端Layui 传过来分页标准
if ( $pro_id=$request->get('pro_id')){
//获取查询分类数据
$pro = Product::where('pro_id',$pro_id)->orderby('pro_id','desc')->paginate($limit);
}else{
//获取所有分类数据
$pro = Product::orderby('pro_id','desc')->paginate($limit);
}
return $pro;
}