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

引入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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在后端的Controller中获取数据并进行分页处理,可以使用PagedList.Mvc库来方便实现分页功能。 在Controller中返回的Model中,需要包含分页信息和当前页的数据。 然后,在前端的视图文件中,引入layui分页插件,然后通过ajax异步请求后端数据,并将数据填充到页面中。 示例代码如下: Controller: ```csharp public ActionResult Index(int? page) { int pageNumber = page ?? 1; int pageSize = 10; List<User> userList = userRepository.GetUserList(); // 分页处理 var pagedList = userList.ToPagedList(pageNumber, pageSize); return View(pagedList); } ``` View: ```html <div id="user-list"> @Html.Partial("_UserList", Model) </div> <div id="pagination"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.9/layui.all.min.js"></script> <script> layui.use(['laypage'], function () { var laypage = layui.laypage; // 初始化分页 laypage.render({ elem: 'pagination', count: @Model.TotalItemCount, limit: @Model.PageSize, curr: @Model.PageNumber, jump: function (obj, first) { // 首次不执行 if (!first) { // 异步请求后端数据 $.get('@Url.Action("Index")', { page: obj.curr }, function (data) { $('#user-list').html(data); laypage.render({ elem: 'pagination', count: @Model.TotalItemCount, limit: @Model.PageSize, curr: obj.curr }); }); } } }); }); </script> ``` 其中,_UserList是一个局部视图文件,用于展示每页的数据。在laypage.render函数中,需要传入count、limit、curr三个参数,分别表示数据量、每页数据量和当前页码。在jump回调函数中,需要异步请求后端数据,并将数据填充到页面中。最后,再次调用laypage.render函数,更新分页组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值