jq json获取数据和分页

浏览
43
回复
0
收藏
0
点赞
0

1#

2019-4-6 13:06:23
bootstrap 弹出模态框、加载数据、显示分页。

json数据
  1. {
  2.     "rid":"l8lIuAjIgL",
  3.     "pagesize":"10",//每页条数
  4.     "count":"2",//总条数
  5.     "totalpage":"1",//分页数
  6.     "result":[//列表
  7.         {
  8.             "uname":"admin",
  9.             "followuid":"1",
  10.             "articlenum":"28",
  11.             "dateline":"<span title="2019-4-6">1 秒前</span>"
  12.         },
  13.         {
  14.             "uname":"xiaocai",
  15.             "followuid":"2",
  16.             "articlenum":"2",
  17.             "dateline":"<span title="2019-4-5">昨天 23:40</span>"
  18.         }
  19.     ]
  20. }
复制代码

弹窗按钮
  1. <a href="javascript:;" onclick="followlist('follow','column','$zhuanlan['rid']','list','1')">人关注</a>
复制代码

jq
  1. <script type="text/javascript">
  2. var curPage;        //当前页数
  3. var totalItem;      //总记录数
  4. var pageSize;       //每一页记录数
  5. var totalPage;      //总页数

  6. //获取分页数据
  7. function followlist(ac,gtype,rid,view,page){
  8.         jQuery("body").append('<div class="modal fade" id="follow_modal"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h4 class="modal-title text-md">关注者<span class="following_num mx-1"></span>人</h4><button type="button"class="close"data-dismiss="modal">×</button></div><div class="modal-msg pl-3 pr-3"></div><div class="simplepag mt-4 mb-4 text-center text-md"><div id="pageBar" class="pg"></div></div></div></div></div>');
  9.         jQuery("#follow_modal").modal("show");
  10.   jQuery.ajax({
  11.     type: 'POST',
  12.     url: '/zhuanlan/misc.html?ac='+ac+'&type='+gtype+'&rid='+rid+'&view='+view+'',
  13.     data: {'page':page},
  14.     dataType: 'json',
  15.     beforeSend: function() {
  16.       jQuery("#follow_modal .modal-msg").html('<div class="HoverCard-loading"><div class="BounceLoading" style="width: 60px; height: 18px;"><span class="BounceLoading-child" style="top: 6px; left: 0px; width: 6px; height: 6px; animation-duration: 0.8s; animation-delay: 0s;"></span><span class="BounceLoading-child" style="top: 6px; left: 18px; width: 6px; height: 6px; animation-duration: 0.8s; animation-delay: -0.1s;"></span><span class="BounceLoading-child" style="top: 6px; left: 36px; width: 6px; height: 6px; animation-duration: 0.8s; animation-delay: -0.2s;"></span><span class="BounceLoading-child" style="top: 6px; left: 54px; width: 6px; height: 6px; animation-duration: 0.8s; animation-delay: -0.3s;"></span></div></div>');
  17.     },
  18.     success: function(json) {
  19.       jQuery("#follow_modal .modal-msg").empty();
  20.       totalItem = json.count;
  21.       pageSize = json.pagesize;
  22.       curPage = page;
  23.       totalPage = json.totalpage;
  24.       var data_result = json.result;
  25.       var data_html = "";
  26.       jQuery.each(data_result,function(index,value) {
  27.         data_html += '<div class="d-flex align-items-center justify-content-between pt-3 pb-3 border-bottom border-light"><div class="d-flex align-items-center"><a href="" class="mr-3"><img src="uc_server/avatar.php?uid='+value.followuid+'&size=small" class="rounded" width="45" height="45"></a><div class=""><div class="text-md"><a href="" class="font-weight-bold">'+value.uname+'</a></div><div class="text-sm text-muted">文章 '+value.articlenum+' 篇</div></div></div><div class=""><button type="button" class="btn btn-primary"><i class="fa fa-plus mr-1"></i>关注作者</button></div></div>';
  28.       });
  29.                          jQuery(".following_num").text(json.count);
  30.       jQuery("#follow_modal .modal-msg").append(data_html);
  31.     },
  32.     complete: function() {
  33.       getPageBar(''+ac+'',''+gtype+'',''+rid+'',''+view+'');
  34.     },
  35.     error: function() {
  36.       toastr.error('获取数据失败');//需要通知插件toastr
  37.     }
  38.   });
  39. }

  40. function getPageBar(ac,gtype,rid,view){
  41.   if(curPage > totalPage) {
  42.     curPage = totalPage;
  43.   }
  44.   if(curPage < 1) {
  45.     curPage = 1;
  46.   }
  47.   pageBar = "";

  48.   //如果不是第一页
  49.   if(curPage != 1){
  50.     pageBar += "<span class='pageBtn'><a href='javascript:followlist(""+ac+"",""+gtype+"",""+rid+"",""+view+"",1)'>首页</a></span>";
  51.     pageBar += "<a href='javascript:followlist(""+ac+"",""+gtype+"",""+rid+"",""+view+"","+(curPage-1)+")'><i class='fa fa-angle-double-left'></i></a>";
  52.   }

  53.   //显示的页码按钮(5个)
  54.   var start,end;
  55.   if(totalPage <= 5) {
  56.     start = 1;
  57.     end = totalPage;
  58.   } else {
  59.     if(curPage-2 <= 0) {
  60.         start = 1;
  61.         end = 5;
  62.     } else {
  63.         if(totalPage-curPage < 2) {
  64.             start = totalPage - 4;
  65.             end = totalPage;
  66.         } else {
  67.             start = curPage - 2;
  68.             end = curPage + 2;
  69.         }
  70.     }
  71.   }

  72.   for(var i=start;i<=end;i++) {
  73.     if(i == curPage) {
  74.         pageBar += "<strong>"+i+"</strong>";
  75.     } else {
  76.         pageBar += "<a href='javascript:followlist(""+ac+"",""+gtype+"",""+rid+"",""+view+"","+i+")'>"+i+"</a>";
  77.     }
  78.   }
  79.    
  80.   //如果不是最后页
  81.   if(curPage != totalPage){
  82.     pageBar += "<a href='javascript:followlist(""+ac+"",""+gtype+"",""+rid+"",""+view+"","+(parseInt(curPage)+1)+")'><i class='fa fa-angle-double-right'></i></a></span>";
  83.     pageBar += "<a href='javascript:followlist(""+ac+"",""+gtype+"",""+rid+"",""+view+"","+totalPage+")'>尾页</a>";
  84.   }
  85.   if(totalPage > '1'){
  86.           jQuery("#pageBar").html(pageBar);
  87.   }
  88. }
  89. </script>
复制代码

帖子里反斜杠被过滤掉了,补充
javascript:followlist(\""+ac+"\",\""+gtype+"\",\""+rid+"\",\""+view+"\","+totalPage+")。

SIGNATURE
想的简单做的复杂

回复主题

已有 0 条回复
您需要登录后才可以回帖 登录 | 注册
高级模式

关于楼主
管理员
帖子
1483
日志
41
精华
19
精华推荐