layui 分页ajax,前端使用layui分页

该博客详细介绍了如何利用layui的form和laypage组件进行分页数据的查询和展示。通过监听按钮点击事件,发送AJAX请求,获取并渲染分页数据。示例中展示了数据总量、当前页数和每页显示条数的处理逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

引入layui相关组件layui.use([ 'form', 'laypage'], function() {

var $ = layui.$;

var laypage = layui.laypage;

var form = layui.form;

function sel(message,page,limit){

$.ajax({

url:'${path}/interview/select',

data:{message:message,page:page,limit:limit},

dataType:'json',

type:'get',

success:function(res){

laypage.render({

elem: 'demo7'

,count:res.count

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

,jump: function(obj,first){

console.log(obj);

if(first){//第一次

console.log("-")

}else{//查询数据直接渲染

$.ajax({

url:'${path}/interview/select',

data:{message:message,page:obj.curr,limit:obj.limit},

dataType:'json',

type:'get',

success:function(res){

console.log(res);

}

})

}

}

});

},error:function(){

layui.msg("网络异常");

}

})

}

sel("",1,10);

$("#sear").click(function(){

sel($("#message").val(),1,10);

})

});

返回结构:{count: 56, data: ["1", "2", "3"], code: 0}

count:数据总量,data:数据,code:返回状态

例:

6b2435065c09a0130cb5fb158f6f03ed.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值