使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页_AJAX相关

先给大家展示下运行效果图：

 1.后台action产生json数据。

List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);
int totalRows = blackList.size();
StringBuffer sb = new StringBuffer();
     sb.append("{\"totalCount\":\""+totalRows+"\",");
     sb.append("\"jsonRoot\":[");
     for (int i=0;i<blackList.size();i++) {
       LBlack blackInfo = (LBlack)blackList.get(i);
       sb.append("{\"id\":\""+ blackInfo.getId());
       sb.append("\",");
       sb.append("\"mobile\":\""+ blackInfo.getMobile());
       sb.append("\",");
       sb.append("\"province\":\""+ blackInfo.getProvince());
       sb.append("\",");
       sb.append("\"gateway\":\""+ blackInfo.getGateway());
       sb.append("\",");
       sb.append("\"insertTime\":\""+ blackInfo.getInsertTime());
       sb.append("\",");
       sb.append("\"remark\":\""+ blackInfo.getRemark());
       sb.append("\"");
       sb.append("},");
     }
     sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号
     sb.append("]}");
     HttpServletResponse response = ServletActionContext.getResponse();
     response.setContentType("text/plain");
     response.getWriter().print(sb);

   2.struts.xml相关配置

<action name="blackList" class="blackAction" method="blackList">
  <!--plaintext用于显示页面原始代码的结果类型-->
  <result type="plainText">
  <param name="charSet">UTF-8</param>
  <param name="location">/WEB-INF/jsp/manage/black.jsp</param>
  </result>
</action>

3.js获取json数据分页显示

function getJSONData(pn) {
  // alert(pn);
  $.getJSON("blackList.ce", function(data) {
    var totalCount = data.totalCount; // 总记录数
    var pageSize = 10; // 每页显示几条记录
    var pageTotal = Math.ceil(totalCount / pageSize); // 总页数
    var startPage = pageSize * (pn - 1);
    var endPage = startPage + pageSize - 1;
    var $ul = $("#json-list");
    $ul.empty();
    for (var i = 0; i < pageSize; i++) {
      $ul.append('<li class="li-tag"></li>');
    }
    var dataRoot = data.jsonRoot;
    if (pageTotal == 1) {   // 当只有一页时
      for (var j = 0; j < totalCount; j++) {
        $(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
        .append("<span class='col2'>" + parseInt(j + 1)
            + "</span>").append("<span class='col3'>" + dataRoot[j].mobile
            + "</span>").append("<span class='col4'>" + dataRoot[j].province
            + "</span>").append("<span class='col5'>" + dataRoot[j].gateway
            + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
            + "</span>").append("<span class='col7'>" + dataRoot[j].remark
            + "</span>")
      }
    } else {
      for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {
        if( j == totalCount){
          break;    // 当遍历到最后一条记录时，跳出循环
        }
        $(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
        .append("<span class='col2'>" + parseInt(j + 1)
            + "</span>").append("<span class='col3'>" + dataRoot[j].mobile
            + "</span>").append("<span class='col4'>" + dataRoot[j].province
            + "</span>").append("<span class='col5'>" + dataRoot[j].gateway
            + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
            + "</span>").append("<span class='col7'>" + dataRoot[j].remark
            + "</span>")
      }
    }
    $(".page-count").text(pageTotal);
  })
}
function getPage() {
  $.getJSON("blackList.ce", function(data) {
        pn = 1;
        var totalCount = data.totalCount; // 总记录数
        var pageSize = 10; // 每页显示几条记录
        var pageTotal = Math.ceil(totalCount / pageSize); // 总页数
        $("#next").click(function() {
              if (pn == pageTotal) {
                alert("后面没有了");
                pn = pageTotal;
              } else {
                pn++;
                gotoPage(pn);
              }
            });
        $("#prev").click(function() {
              if (pn == 1) {
                alert("前面没有了");
                pn = 1;
              } else {
                pn--;
                gotoPage(pn);
              }
            })
        $("#firstPage").click(function() {
              pn = 1;
              gotoPage(pn);
            });
        $("#lastPage").click(function() {
              pn = pageTotal;
              gotoPage(pn);
            });
        $("#page-jump").click(function(){
          if($(".page-num").val() <= pageTotal && $(".page-num").val() != ''){
            pn = $(".page-num").val();
            gotoPage(pn);
          }else{
            alert("您输入的页码有误！");
            $(".page-num").val('').focus();
          }
        })
        $("#firstPage").trigger("click");
      })
}
function gotoPage(pn) {
  // alert(pn);
  $(".current-page").text(pn);
  getJSONData(pn)
}
$(function() {
  getPage();
})

ps：JAVA+JQuery实现异步分页

最近一个项目要求实现异步分页，简单的写了一下，不好的请指出~

/**
*分页类
*/
public class PageBean {
  publicint rowCount = 0; // 总记录数
  publicint currentPage = 1;// 当前页数
  publicint sizePerPage = 20;// 每页显示条数
  publicint pageCount = 0;// 总页数
  publicString pageURL;// 请求URL
  publicString pageDisplay;// JSP页面显示
  publicString pageStyle = "numberStyle";// 分页样式
  publicint pagePreOffset = 10;// 向前偏移量
  publicint pageNextOffset = 9;// 向后偏移量
  publicString pageCss;// 预留
  publicString getPageCss() {
    returnpageCss;
  }
  publicvoid setPageCss(String pageCss) {
    this.pageCss = pageCss;
  }
  publicString getPageStyle() {
    returnpageStyle;
  }
  publicvoid setPageStyle(String pageStyle) {
    this.pageStyle = pageStyle;
  }
  publicint getPagePreOffset() {
    returnpagePreOffset;
  }
  publicvoid setPagePreOffset(intpagePreOffset) {
    this.pagePreOffset = pagePreOffset;
  }
  publicint getPageNextOffset() {
    returnpageNextOffset;
  }
  publicvoid setPageNextOffset(intpageNextOffset) {
    this.pageNextOffset = pageNextOffset;
  }
  publicString getPageDisplay() {
    String nextClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;' ";
    String preClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;' ";
    String firstClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=1");return false;' ";
    String lastClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;' ";
    String onChange=" onchange='ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;' ";
    StringBuffer pageString =new StringBuffer();
    pageString.append("<div class='"+ this.pageStyle +"'><span >");
    // 数字样式
    if("numberStyle".equalsIgnoreCase(this.pageStyle)) {
      // 如果只有一页，不需要分页
      if(this.getPageCount() ==1) {
        // pageString.append("<strong> 1</strong> ");
      }else {
        if(this.currentPage >1) {// 如果当前页数大于1，<< <可用
          pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='" + this.pageURL
              +"?currentPage=1'><<</a> ");
          pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"'><</a> ");
        }else {
          pageString
              .append("<a class='pagination-first'><<</a> ");
          pageString
              .append("<a class='pagination-prev'><</a> ");
        }
        // 定义向前偏移量
        intpreOffset = this.currentPage -1 > this.pagePreOffset ?this.pagePreOffset
            :this.currentPage -1;
        // 定义向后偏移量
        intnextOffset = this.getPageCount() -this.currentPage >this.pageNextOffset ?this.pageNextOffset
            :this.getPageCount() -this.currentPage;
        // 循环显示链接数字，范围是从 当前页减向前偏移量 到 当前页加向后偏移量
        for(int i = (this.currentPage - preOffset); i <= (this.currentPage + nextOffset); i++) {
          String numClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;' ";
          if(this.currentPage == i) {// 当前页要加粗显示
            pageString
                .append("<strong style='color:black;border:0'>"
                    + i +"</strong> ");
          }else {
            pageString.append("<a "+numClick+"href='"+ this.pageURL
                +"?currentPage=" + i + "'>" + i +"</a> ");
          }
        }
        // 如果当前页小于总页数，> >>可用
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"'>></a> ");
          pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");
        }else {
          pageString
              .append("<a class='pagination-next' >></a> ");
          pageString
              .append("<a class='pagination-last'>>></a> ");
        }
        pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");
      }
    }else if("normalStyle".equalsIgnoreCase(this.pageStyle)) {
      if(this.getPageCount() ==1) {
        pageString.append("<strong> 共1页</strong> ");
      }else {
        if(this.currentPage >1) {
          pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='" + this.pageURL
              +"?currentPage=1'><<</a> ");
          pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"'><</a> ");
        }else {
          pageString
            .append("<a class='pagination-first'><<</a> ");
          pageString
            .append("<a class='pagination-prev'><</a> ");
        }
        pageString.append("<span class='pageinfo'>第"+this.currentPage+"页/"+this.pageCount+"页</span>");
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"'>></a> ");
          pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");
        }else {
          pageString
            .append("<a class='pagination-next' >></a> ");
          pageString
            .append("<a class='pagination-last'>>></a> ");
        }
        pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");
      }
    }
    pageString.append("</span></div>");
    this.pageDisplay = pageString.toString();
    returnpageDisplay;
  }
  publicvoid setPageDisplay(String pageDisplay) {
    this.pageDisplay = pageDisplay;
  }
  publicString getPageURL() {
    returnpageURL;
  }
  publicvoid setPageURL(String pageURL) {
    this.pageURL = pageURL;
  }
  publicint getPageCount() {
    this.pageCount =this.rowCount %this.sizePerPage ==0 ? (this.rowCount /this.sizePerPage)
        : (this.rowCount /this.sizePerPage) +1;
    returnthis.pageCount;
  }
  publicvoid setPageCount(intpageCount) {
    this.pageCount = pageCount;
  }
  publicint getRowCount() {
    returnrowCount;
  }
  publicvoid setRowCount(introwCount) {
    this.rowCount = rowCount;
  }
  publicint getCurrentPage() {
    returncurrentPage;
  }
  publicvoid setCurrentPage(intcurrentPage) {
    this.currentPage = currentPage;
  }
  publicint getSizePerPage() {
    returnsizePerPage;
  }
  publicvoid setSizePerPage(intsizePerPage) {
    this.sizePerPage = sizePerPage;
  }
  privateString getOptions(){
    StringBuffer sb =new StringBuffer();
    switch(this.sizePerPage) {
    case10:
      sb.append("<option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");
      break;
    case20:
      sb.append("<option value=20>20</option><option value=10>10</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");
      break;
    case30:
      sb.append("<option value=30>30</option><option value=10>10</option><option value=20>20</option><option value=50>50</option><option value=100>100</option>");
      break;
    case50:
      sb.append("<option value=50>50</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=100>100</option>");
      break;
    case100:
      sb.append("<option value=100>100</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option>");
      break;
    }
    returnsb.toString();
  }
}

//后台调用
PageBean page = new PageBean();
setPageInfo(list,request);
public void setPageInfo(List list,HttpServletRequest request){
    page.setCurrentPage(this.getCurrentPage());
    if(request.getParameter("perSize")==null){
      page.setSizePerPage(20);//default 20
    }
    else{
      page.setSizePerPage(Integer.valueOf(request.getParameter("perSize")));
    }
    page.setRowCount(list.size());
    //page.setPageStyle("normalStyle");
    //page.setPagePreOffset(5);//default 10
    //page.setPageNextOffset(4);//default 9
    page.setPageURL(request.getRequestURL().toString());
}
[css] view plaincopyprint?
/**
**  CSS
*/
.numberStyle,.normalStyle {
  text-align:left;
}
.numberStyle a,.normalStyle a {
display: inline-block;
color: #5489F1;
text-decoration: none;
font-size: 14px;
font-weight:bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-position:center;
}
.numberStyle strong,.normalStyle strong {
display: inline-block;
color: #5489F1;
text-decoration: none;
font-size: 14px;
font-weight:bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-position:center;
}
.numberStyle a:hover,.normalStyle a:hover{
background-color: #d0d0d0;
}
.normalStyle .pageinfo{
  font-size: 14px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #5489F1;
} 

[javascript] view plaincopyprint?
/**
** JS import jquery.js before call function
*/
function ajaxpage(action){
  action=action+"&perSize="+$("#pageSelect").val();
  $.ajax( {
  type : "POST",
  url : action,
  success : function(msg) {
  //回调函数，后台拼接字符串返回msg
    //删除原有数据，添加新数据
    //比如：$("#displayTable>thead").nextAll().remove();$("#displayTable").append(msg);
  }
  });
}

以上就是本文给大家介绍的使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页，希望对大家有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery_ajax_json分页
Jquery_Ajax_Json分页
jquery ajax 异步分页、ajax异步分页、ajax 异步分页插件js、ajax实现异步分页、ajax 异步分页查询，以便于您获取更多的相关知识。

时间： 2025-01-21 01:19:04

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页_AJAX相关的相关文章

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图: 1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+tot

django中使用jquery ajax post数据出现403错误的解决办法(两种方法)_AJAX相关

在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;

jQuery+Ajax实现表格数据不同列标题排序(为表格注入活力)_AJAX相关

表格大家都十分熟悉,如今的CSS也使得表格的布局越来越光彩耀人.但是,无论如何,都掩饰不了那些包装下的死板. 那么如何让那些死板的数据 更具有可读性.可用性,能够让我们那些数据在"动"呢? 下面我们使用jquery+ajax 来为表格注入些活力.主要实现的目的就是:将表格的列标题转化为按钮,点击不同的列标题,便按相应的列对数据进行排序.比如学生信息表,我点击"生日"列,这张表便按生日排序将结果呈现在我们面前.使用ajax来调用本页也避免了刷新页面所带来的折磨. 下面

基于Jquery+Ajax+Json实现分页显示附效果图_jquery

1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+totalRows+"\

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

 本篇文章主要是对asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码进行了介绍,需要的朋友可以过来参考下,需要对大家有所帮助  代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %> <!DOCTYPE html PUBLIC &quo

asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码_实用技巧

复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

jQuery ajax json 数据的遍历代码_AJAX相关

先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

jQuery ajax json 数据的遍历代码

先给大家说下我的需求:进行ajax请求后,后台传递回来以下json数据. 具体实现代码如下所示: JavaScript代码 { "data":[ {"id":"1","name":"选择A","value":"A"}, {"id":"2","name":"选择B","value&

jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载_AJAX相关

本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码,用户点击页面中自己喜欢的图片上的红心按钮时,前端页面向后台发送一个ajax请求,后台PHP程序接收请求后,查询IP库中是否已经有该用户的点击记录,如果没有,则将对应的数值+1,同时将该用户IP信息写入IP库,反之则告诉用户已经"喜欢过了".    源码下载地址:http://xiazai.jb51.net/201509/yuanma/loveit(jb51.net).rar 实现过程 本文