layUI實現(xiàn)前端分頁和后端分頁
更新時間:2019年07月27日 16:26:38 作者:再如月
這篇文章主要為大家詳細介紹了layUI實現(xiàn)前端分頁和后端分頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了layUI實現(xiàn)前端分頁和后端分頁效果,供大家參考,具體內(nèi)容如下
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>暫無數(shù)據(jù)</li>');
}
//顯示分頁
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
laypage.render({
elem: 'page' //注意,這里的 test1 是 ID,不用加 # 號
,count: total//數(shù)據(jù)總數(shù),從服務(wù)端得到
,limit: 15//每頁顯示條數(shù)
,curr: curr || 1 //當前頁
,pages: pageCount, //通過后臺拿到的總頁數(shù)
skip: true,
jump: function (obj, first) { //觸發(fā)分頁后的回調(diào)
if (!first) { //點擊跳頁觸發(fā)函數(shù)自身,并傳遞當前頁:obj.curr
pagination(obj.curr,gwayId,mlity,ePart);
dqym=obj.curr;
}
}
});
});
$('#page').append('<p class="p_tj">共<i style="color:red;">' + total +
'</i>條數(shù)據(jù),每頁顯示'+pageSize +'條</p>');
},
complete: function () {
//請求完成的處理
},
error: function () {
//請求出錯處理
}
});
}
pagination(1);
//前端分頁
function pagination(curr,gwayId,userN) {
$(".man_zy_list").html('加載中...');
let dd={
conditions: {
gatewayId:gwayId,
userName:userN
},
identity:{
userName:userName1,
sessionId:sessionId1,
token:token2
}
};
let dataHtml = [];
console.log("dd1212",dd);
$.ajax({
type:"POST",
dataType: 'json',
url:UserResourceList,
data:dd,
headers:{ 'X-Requested-With': 'XMLHttpRequest' },
success:function(data){
var total=data.data.length;
if(data.resultCode==0){
for(var i=0;i<data.data.length;i++){
dataHtml[i] = '<tr><td>'+data.data[i].userResourceId+'</td><td><input checked="checked" type="checkbox" class="" value="" checked="'+data.data[i].modality+
'</td><td><a title="" class="btn btn-sm btn-info manage_zy_kfw text-white">可訪問資源</a><a title="" class="btn btn-sm btn-info manage_zy_xg text-white" userId="'+data.data.result[i].userId+
'">刪除</a></td></tr>'
}
if(curr==1){
var ss11=dataHtml.concat().splice(0, 15);
$(".man_zy_list").html(ss11);
}
//顯示分頁
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
laypage.render({
elem: 'page' //注意,這里的 test1 是 ID,不用加 # 號
,count: total//數(shù)據(jù)總數(shù),從服務(wù)端得到
,limit: 15//每頁顯示條數(shù)
,curr: curr || 1 //當前頁
,pages:total % 15==0 ? total/15 : Math.floor(total/15)+1,//根據(jù)記錄條數(shù),計算頁數(shù), //通過后臺拿到的總頁數(shù)
skip: true,
jump: function (obj, first) {
//觸發(fā)分頁后的回調(diào)
if (!first) { //點擊跳頁觸發(fā)函數(shù)自身,并傳遞當前頁:obj.curr
var ss=dataHtml.concat().splice((obj.curr||1)*15-15, 15);
$(".man_zy_list").html(ss);
}
}
});
});
$('#page').append('<p class="p_tj">共<i style="color:red;">' + total +
'</i>條數(shù)據(jù),每頁顯示'+15 +'條</p>');
}else{
$(".man_zy_list").html('<li>暫無數(shù)據(jù)</li>');
}
},
complete: function () {
//請求完成的處理
},
error: function () {
//請求出錯處理
}
});
}
pagination(1,'','');
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明(bootstrap做IE低版
這篇文章主要介紹了前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明,需要的朋友可以參考下2023-05-05
用javascript實現(xiàn)分割提取頁面所需內(nèi)容
用javascript實現(xiàn)分割提取頁面所需內(nèi)容...2007-05-05
JavaScript處理XML DOM、XPath和XSLT方法詳解
這篇文章介紹了JavaScript處理XML DOM、XPath和XSLT的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
js+html5實現(xiàn)canvas繪制鏤空字體文本的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制鏤空字體文本的方法,涉及html5文字效果的相關(guān)技巧,需要的朋友可以參考下2015-06-06
關(guān)于js復制內(nèi)容到瀏覽器剪貼板報錯:Cannot read properties of&n
這篇文章主要給大家介紹了關(guān)于js復制內(nèi)容到瀏覽器剪貼板報錯:Cannot read properties of undefined (reading ‘writeText‘)的解決方案,文中給出了詳細的原因分析和解決方案,需要的朋友可以參考下2024-01-01
JavaScript實現(xiàn)異步提交表單數(shù)據(jù)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)異步提交表單數(shù)據(jù),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05

