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;
}