layUI实现前端分页和后端分页


Posted in Javascript onJuly 27, 2019

本文实例为大家分享了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);
//前端分页
     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//数据总数,从服务端得到
       ,limit: 15//每页显示条数
       ,curr: curr || 1 //当前页

              
              ,pages:total % 15==0 ? total/15 : Math.floor(total/15)+1,//根据记录条数,计算页数, //通过后台拿到的总页数
              
              skip: true,
              jump: function (obj, first) { 
              //触发分页后的回调
              
                if (!first) { //点击跳页触发函数自身,并传递当前页: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>条数据,每页显示'+15 +'条</p>');

 
        }else{
             $(".man_zy_list").html('<li>暂无数据</li>');
             
             }


          },
          complete: function () {
            //请求完成的处理
          },
          error: function () {
            //请求出错处理
          }
      });
    }
pagination(1,'','');

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
纯JS代码实现气泡效果
May 04 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
浅谈js中的this问题
Aug 31 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 #Javascript
layui实现数据分页功能
Jul 27 #Javascript
layUI实现列表查询功能
Jul 27 #Javascript
Layui实现带查询条件的分页
Jul 27 #Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 #Javascript
layui表格数据重载
Jul 27 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
用javascript操作xml
2006/11/04 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
PyMongo安装使用笔记
2015/04/27 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
现场活动策划方案
2014/08/22 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
红色经典电影观后感
2015/06/18 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP