本文實例為大家分享了layUI實現前端分頁和后端分頁效果,供大家參考,具體內容如下
layui后端分頁:
function pagination(curr,gwayId,mlity,ePart) { $(".manage_ys_list").html('加載中...'); let dd={ conditions: { gatewayId:gwayId, searchText:"", pageSize:15, pageIndex:curr-1 }, identity:{ "userName":userName1, "sessionId":sessionId1, "token":token2 } } $.ajax({type:"POST",dataType: 'json',url:UserListPaged, data:dd,headers:{ 'X-Requested-With': 'XMLHttpRequest' }, success:function(data){ let total=data.data.recordCount; let pageCount=data.data.pageCount; let pageSize=data.data.pageSize; if(data.data.recordCount>=0){ let dataHtml = ''; for(var i=0;i<data.data.result.length;i++){ dataHtml += '<tr><td>'+data.data.result[i].gatewayId+'</td><td>'+data.data.result[i].userId+ '</td><td>'+data.data.result[i].realName+'</td><td>'+data.data.result[i].sex+'</td><td>'+data.data.result[i].workUnit+ '</td><td>'+data.data.result[i].phoneNo+'</td><td>'+data.data.result[i].isAdmin+ '</td><td><a title="" class="btn btn-sm btn-info text-white manage_ys_xg" gatewayId="'+ data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+ '" realName="'+data.data.result[i].realName+'" sex="'+data.data.result[i].sex+ '" age="'+data.data.result[i].age+'" birthday="'+data.data.result[i].birthday+ '" workUnit="'+data.data.result[i].workUnit+'" phoneNo="'+data.data.result[i].phoneNo+ '" isAdmin="'+data.data.result[i].isAdmin+'">修改</a><a href="#" rel="external nofollow" title="" class="btn btn-warning text-white btn-sm man_ys_shanc" gatewayId="'+ data.data.result[i].gatewayId+'" userId="'+data.data.result[i].userId+'">刪除</a></td></tr>' } $(".manage_ys_list").html(dataHtml); }else{ $(".manage_ys_list").html('<li>暫無數據</li>'); } //顯示分頁 layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; laypage.render({ elem: 'page' //注意,這里的 test1 是 ID,不用加 # 號 ,count: total//數據總數,從服務端得到 ,limit: 15//每頁顯示條數 ,curr: curr || 1 //當前頁 ,pages: pageCount, //通過后臺拿到的總頁數 skip: true, jump: function (obj, first) { //觸發分頁后的回調 if (!first) { //點擊跳頁觸發函數自身,并傳遞當前頁:obj.curr pagination(obj.curr,gwayId,mlity,ePart);dqym=obj.curr; } } }); }); $('#page').append('<p class="p_tj">共<i style="color:red;">' + total + '</i>條數據,每頁顯示'+pageSize +'條</p>'); }, complete: function () { //請求完成的處理 }, error: function () { //請求出錯處理 }});}pagination(1);
新聞熱點
疑難解答
圖片精選