你的位置:首页 > Java教程

[Java教程]JQuery Pagination 分页插件 增加了首页尾页以及跳转功能


JQuery分页插件

挺好用的

但是官方是没有提供首页尾页以及跳转功能

我觉得这个功能可以有,于是就改进了一下

一个js一个css从连接里面下

链接:http://pan.baidu.com/s/1nvaq99R 密码:9nfb

上效果图:

 

页面代码

<script type="text/javascript">//分页查询开始$(document).ready(function() {  getDataList(0, null);});var rows = 10;var page = 1;var initFlag = true;function getDataList(currPage, jg) {        $.ajax({        url : "page",        type : "post",        dataType : 'json',        data : {rows : rows,page : currPage + 1},        contentType : "application/x-www-form-urlencoded; charset=utf-8",        success : function(response) {          if (response.result) {            if (response.data != null && response.data != ""&& response.total != undefined && response.total > 0) {              if (initFlag) {                $("#Pagination").pagination(                    response.total,                    {                      items_per_page : rows,                      num_edge_entries : 1,                      num_display_entries : 8,                      callback : getDataList//回调函数                    });                initFlag = false;              }              $("#listData").html("");              loadDataList(response.data);            } else {              //暂无数据            }          } else {            //暂无数据          }        }      });}  function loadDataList(listdata) {    //表头    var html ="<tr class='t-header'>"+            "<td>头像</td>"+            "<td>姓名</td>"+            "<td>密码</td>"+          "</tr>";    $("#listData").append(html);    for (var i = 0; i < listdata.length; i++) {      var n = listdata[i];      //表格      var html = "<tr>"+              "<td>"+"<img src='getphoto?unid="+n.uuid+"' onerror='this.src=\"resources/img/default.png\"' style='width:48px;height:48px;border-radius:48px;'/>"+"</td>"+              "<td>"+n.username+"</td>"+              "<td>"+n.password+"</td>"+            "</tr>";      $("#listData").append(html);    }  }  //分页查询结束</script>

<body>  <div class="clearbox">      <div class="x-box">          <h2><a>表格</a></h2>          <table id="listData"></table>      </div>      <div id="Pagination" class="pagination"></div>  </div></body>

后台代码

  /**   * 分页请求地址   * @param request   * @param response   * @return   */  @ResponseBody  @RequestMapping("page")  public Map<String, Object> page(HttpServletRequest request,HttpServletResponse response){    int total = userService.getTotal();    int page = Integer.parseInt(request.getParameter("page"));//当前页    int rows = Integer.parseInt(request.getParameter("rows"));//每页条数    List<User> data =userService.getCurrentPage((page-1)*rows, rows);    boolean result = (data == null)?false:true;     Map<String, Object> map = new HashMap<String, Object>();    map.put("data", data);    map.put("total", total);    map.put("result", result);    return map;  }

就先这样,有什么不清楚的可以给我留言。