自己写的pagination分页,ajax异步加载

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>

<html>

<head lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" type="text/css" href="../plugin/page/pagination.css">

<!-- <link rel="stylesheet" type="text/css" href="../plugin/page/common.css"> -->

<!-- <link rel="stylesheet" type="text/css" href="../plugin/page/reset.css"> -->

    <style type="text/css">

    </style>

<title>用户注册及用户列表</title>

</head>

<body>

<!-- 用户列表展示 -->

<div>

  <table border="1px">

  <thead>

    <tr>

    <td width="40">主键</td>

    <td width="60">用户名</td>

    <td width="240">创建时间</td>

    </tr>

  </thead>

  <tbody id="user_tbody_id">

    <!-- js追加 -->

  </tbody>

  </table>

  <!-- 分页div -->

  <div class="M-box"></div>

</div>

</body>

<script src="../js/jquery-1.11.3/jquery.js" type="text/javascript" charset="utf-8"></script>

<script src="../plugin/page/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript">


// pagination分页

// 加载用户列表

$(function(){

  paging();

});

function paging(page){

  $.ajax({

  url:"../user/getAllUser",

  type:"post",

  dataType:"json",

  data:{'page':page},

  success:function(data){

    $('#user_tbody_id').empty();

    if(data.status != 200){

    alert(data.msg);

    }else{

    var apiPage = data.item;

    if(apiPage.count == 0){

      alert("没有用户!")

    }else{

      $('.M-box').pagination({

          totalData:apiPage.count,

          showData:apiPage.size,

          current:apiPage.page,

          coping:true,

          homePage:'首页',

          endPage:'末页',

          prevContent:'上页',

          nextContent:'下页',

          callback: function(api){

            paging(api.getCurrent());

          }

      });

      zhuijiaUser(apiPage.item);

    }

    }

   

  },

  error:function(err){

    console.log(err);

    alert("error");

  }

  });

}

function zhuijiaUser(data){

  $.each(data,function(k,v){

  $('#user_tbody_id').append(

    '<tr>'+

    '<td>'+v.id+'</td>'+

    '<td>'+v.username+'</td>'+

    '<td>'+v.create_time+'</td>'+

    '</tr>'

  );

  });

}

</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 5,296评论 0 7
  • 《裕语言》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 27,642评论 5 19
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,632评论 0 3
  • 我很想有个闺蜜,可以一起分享秘密,一起疯癫犯二,一起八卦,一起看着帅哥犯花痴,一起血拼,一起……分担彼此的忧愁,参...
    喵喵普诺阅读 373评论 0 2
  • 分别是每个人这一生都要经历的。古人说:自古多情伤离别,更那堪,冷落清秋节。 古人说:日暮酒醒人已远,满天风雨下西楼...
    盈盈她说阅读 325评论 0 0