jquery.pagination.js分页

本文介绍了一个结合JSP和JavaScript实现的分页功能案例,通过AJAX技术异步获取并展示数据列表。具体包括JSP页面布局设置、JavaScript中AJAX请求的编写及回调函数的定义,以及后端Action处理数据获取与JSON格式响应的过程。
摘要由CSDN通过智能技术生成

-------------jsp

<c:if test="${dataListLength > 0 }">
<div class="list_style_page">
<input type="hidden" id="page" name="page" value="${page }"/>
<input type="hidden" id="totalPage" name="totalPage" value="${totalPage }"/>
<input type="hidden" id="total" name="total" value="${total }"/>
<input type="hidden" id="pageSize" name="pageSize" value="${pageSize }"/>
<div id="pageDiv" class="pagination"></div>
</div>
</c:if>

-------------js

<script type="text/javascript">
var items_per_page = 2;  
var page_index = 0;  
  
function getDataList(index){  
    var pageIndex = index;  
    $.ajax({  
        type: "post",  
        dataType: "json",
        url: "${path}/opinionAction!getOpinionShowByAjax.do",  
        data: "page="+pageIndex+"&pagesize="+items_per_page+"&opinion.opcollid="+$("#opinioncollectionid").val(),  
        success: function(data,textStatus){ 
        var line = "";
 $.each(data, function (index,value) {
 var idx=index;
 if(idx==0)
 {
 idx=1;
 }
 else{
 idx=0;
     }
 var dc=2*pageIndex-idx;
line+="<div class='opinion-list translateBG' defaultColor='#fff' translateColor='#f8f8f8' style='cursor: default;'>";
line+="<p class='opinion-desc'>第"+dc+"位网友:姓名:"+value.creator+"  于"+value.createdates+" 发表以下意见:</p>";
line+="<div class='opinion-content'>"+value.content+"</div>";
line+="</div>";  
 
});
 $("#opinion").html(line); 
        },error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("error:"+errorThrown);
        } 
    });  
}  
  
  
function pageselectCallback(page_index, jq){ 
page_index=page_index+1;
    getDataList(page_index);  
}  
  
/* $(document).ready(function(){  
    getDataList(page_index);  
}); */




//分页-只初始化一次  
if($("#pageDiv").html().length == ''){  
    $("#pageDiv").pagination($("#total").val(), {  
        items_per_page : items_per_page,  
        num_display_entries : 10,  
        current_page:$("#totalPage").val()-1,
        num_edge_entries : 2, 
        prev_text : "上一页",  
        next_text : "下一页", 
        link_to : "javascript:void(0);",
        callback : pageselectCallback  
    });  
}
</script>


----------------action

public void getOpinionShowByAjax(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
currentUser = super.getLoginUsers();
try {

opinion.setStatus(Opinion.STATUS.IS_SHOW); //显示在信用网站的数据

this.setPageSize(2);
total = opinionManager.getOpinionCount(opinion);
super.doPage(total,this.getPageSize());
dataList = opinionManager.getOpinionList(opinion,startRownum,endRownum,"CREATEDATE", "ASC");
for (int i =0; i<dataList.size();i++) {
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
dataList.get(i).setCreatedates(format.format(dataList.get(i).getCreatedate()));
}
JSONArray jsonArray = JSONArray.fromObject(dataList);
response.getWriter().write(jsonArray.toString());// 返回json类型对象
response.getWriter().close();
} catch (OpinionException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值