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 相关文章推荐
Prototype使用指南之enumerable.js
Jan 10 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
详解javascript传统方法实现异步校验
Jan 22 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 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的FTP学习(四)
2006/10/09 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
如何理解委托
2012/01/06 面试题
新闻传媒系求职信范文
2014/04/19 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
同学聚会通知短信
2015/04/20 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Python异常类型以及处理方法汇总
2021/06/05 Python
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL