php 表格分页自动编号,php+layui数据表格实现数据分页渲染代码

layui.use(['form','laydate','layer','table','laytpl'],function(){

var laydate = layui.laydate;

var layer = layui.layer;

var table = layui.table;

var laytpl = layui.laytpl;

//---SPU数据---------------------------------------------

var spu_table = table.render({

elem: '#spu-data',　　　//html中table窗口的id

height: 800,

url: '__URL__/spu_data', //后台接口

toolbar: true,

loading: true,

text: {

none: '空空如也'

},

title: 'spu数据',

size: 'sm',

page: {

layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],

limit: 20,

limits: [20,30,50,100,200,5000]

},

cols: [[

{field:'n', title: 'i', width: 55},

{field:'', title: '图', width: 31, templet: '#pimg'},     // templet 引用laytpl中的自定义模板

{field:'', title: '查看详情', width: 120, templet: '#spu_detail'},  // 引用laytpl中的自定义模板

{field:'artnum', title: '货号', sort: true},

{field:'gcolor', title: '颜色组', sort: true},

{field:'cate', title: '品类', sort: true},

{field:'price', title: '业绩', sort: true},

{field:'sales', title: '销量', sort: true},

{field:'hotcake', title: '热销程度', templet: '#hotcake_color', sort: true},

{field:'sumcost', title: '商品成本', sort: true}

]]

});

// 搜索重载数据

$('#spudata_search').click(function(){

// 获取日期的值

var date = $('#spusearch_date').val();

if (!date) {

layer.msg('请选择日期区间搜索', {

time: 2000

});

return false;

}

var perfor_val = $('#perfor_val').val();;

var hot_type = $('#hot_type').val();

var artnum = $('#artnum').val();

var cate_id = $('#cate_id').val();

// 只选其一条件

if (perfor_val && hot_type) {

layer.msg('业绩区间和爆款类型只选其一', {

time: 2000

});

return false;

}

// 数据重载

spu_table.reload({

// 发送条件

where: {

artnum: artnum,

perfor_val: perfor_val,

hot_type: hot_type,

cate_id: cate_id,

date: date,

act: 'reload'

},

page: {

layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],

curr: 1

}

});

})

})