版权声明:本文为博主原创文章,转载请注明文章来源,尊重知识,分享别人标识作者是一种美德 https://blog.csdn.net/u010757785/article/details/81101201
直接列出js吧,说明数据表格虽然不算强大,但是简单的展示渲染还是够了我也满足了,只是处理后台写罢了
html部分
<table id="demo" lay-filter="test"></table>
<div id="page"></div>
js部分
layui.use(['layer','laypage','laytpl','form','laydate','table'], function(){
var layer = layui.layer,
form = layui.form,
laypage = layui.laypage,
laytpl = layui.laytpl,
table = layui.table;;
var searchdata={};
listpage();
function listpage() {
searchdata['p']=1;
currpage=0;
//document.getElementById('listcontent').innerHTML='';
$.ajax({
type: "POST",
url: "",
data: searchdata,
async: false,
success: function (data) {
laypage.render({
elem: 'page'
, count: data['data']['countpage'] //数据总数,从服务端得到
,limit:1
, jump: function (obj, first) {
//obj包含了当前分页的所有参数,比如:
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
searchdata['p']=obj.curr;
console.log(searchdata);
$.ajax({
type: "POST",
url: "",
data: searchdata,
async: false,
success: function (data) {
table.reload('demo', {data: data['data']['listdata']});
}
});
//do something
} else {
tabdata(data['data']['listdata'])
}
}
});
}
});
}
function tabdata(data){
table.render({
elem: '#demo'
,cols: [[ //标题栏
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'name', title: '姓名'}
,{field: 'address', title: '位置'}
,{field: 'mobile', title: '电话'}
,{field: 'services', title: '服务'}
,{field: 'servicesname', title: '服务人'}
,{field: 'servicesadress', title: '服务位置'}
,{field: 'technicalName', title: '服务人电话'}
,{field: 'price', title: '支付金额'}
,{field: 'statusname', title: '支付状态'}
,{field: 'create_time', title: '订单时间'}
]]
,data: data
,text: {
none: '暂无相关数据' //默认:无数据。注:该属性为 layui 2.2.5 开始新增
}
//,skin: 'line' //表格风格
,even: true
//,page: true //是否显示分页
//,limits: [5, 7, 10]
//,limit: 5 //每页默认显示的数量
});
}
});