ajax 异步显示分页

1.jsp页面部分重点内容
这里写代码片代码如下:
<script type="text/javascript">
function delCustomer(id){
    location.href="${pageContext.request.contextPath}/delCustomer?id="+id;
}
//当前页码
var pageNum=1;
//总页数
var totalPage=0;
//总条数
var totalCount=0;   
//每页条数
var currentCount=5;
<%--查询订单--%>
var cid;
function findOrder(customerId){
    cid=customerId;


    $.post("${pageContext.request.contextPath}/order/findOrder",{"customerId":customerId,"pageNum":pageNum,"currentCount":currentCount},function(data){
        var html="";
    //这个万能检测json数据方法
        alert(JSON.stringify(data));
         $.each(data.currentContent,function(i,n){
            html+="<tr><td>"+n.orderNum+"</td><td>"+n.receiverInfo+"</td><td>"+n.price+"</td><td>"+n.customer.cusName+"</td><td>"+"<a href=\"javascript:void(0)\"  onclick =\"delOrder('"+n.orderNum+"')\">删除</a>"+"</td></tr>";
    });
        $("#msg").html(html)  
        //分页信息处理
        pageNum=data.pageNum;
        totalPage=data.totalPage;
        totalCount=data.totalCount;
        currentCount=data.currentCount;
        //alert(JSON.stringify(currentCount));
        var pageHtml="<ul class=\"pagination\">";
        //1.判断是否可以向上翻页
        if(pageNum==1){
            pageHtml+="<li class=\"disabled\"><a href=\"#\">&laquo;</a></li>";
        }else{
            pageHtml+="<li><a href=\"#\" onclick=\"prePage()\">&laquo;</a></li>";
        }
        //2.判断中间页码
        for(var i=1;i<=totalPage;i++){
            if(i==pageNum){
                pageHtml+="<li class=\"active\"><a href=\"#\" onclick=\"selectPage("+i+")\">"+i+"</a></li>";
            }else{
                pageHtml+="<li><a href=\"#\" onclick=\"selectPage("+i+")\">"+i+"</a></li>";
            }
        }

        //3.判断是否可以向下翻页
        if(pageNum==totalPage){
            pageHtml+="<li class=\"disabled\"><a href=\"#\">&raquo;</a></li>";
        }else{
            pageHtml+="<li><a href=\"#\" onclick=\"nextPage()\">&raquo;</a></li>";
        }
        pageHtml+="</ul>";
        alert(JSON.stringify(currentCount))
        $("#page").html(pageHtml);
    },"json") 
}

function prePage(){
    pageNum=pageNum-1;
    findOrder(cid);
}
//向下翻页
function nextPage(){
    pageNum=pageNum+1;
    findOrder(cid);
}

//指定页跳转
function selectPage(pn){
    pageNum=pn;
    findOrder(cid);
}
function delOrder(orderNum){
    location.href="${pageContext.request.contextPath}/order/delOrder?orderNum="+orderNum;
} 

</script>
2.html 部分
<body>
    <table class="table table-striped">
        <tr>
            <td colspan="5"><a
                href="${pageContext.request.contextPath}/addCustomer.jsp"
                class="btn btn-primary btn-lg active" role="button">Add Customer</a>
            </td>

        </tr>
        <tr>
            <td>序号</td>
            <td>图片</td>
            <td>客户名称</td>
            <td>联系方式</td>
            <td>操作</td>
        </tr>

        <s:iterator value="list" status="count">
            <tr>
                <td><s:property value="#count.index+1" /></td>
                <td><img src="<s:property value="cusImgsrc"/>"></td>
                <td><s:property value="cusName" /></td>
                <td><s:property value="cusPhone" /></td>
                <td><a href="javascript:void(0)" class="btn btn-primary btn-sm"
                    onclick="delCustomer(<s:property value="id"/>)">删除客户</a> <a
                    href="javascript:void(0)"
                    onclick="findOrder(<s:property value="id"/>)"
                    class="btn btn-primary btn-sm" data-toggle="modal"
                    data-target="#myModal">订单详情</a></td>
            </tr>
        </s:iterator>
        <%-- <s:debug/> --%>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">订单详情</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <tr>
                            <td>订单编号</td>
                            <td>收货地址</td>
                            <td>订单价格</td>
                            <td>客户名称</td>
                            <td>操作</td>
                        </tr>
                        <tbody id="msg">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <nav id="page"> </nav>
                </div>
            </div>
        </div>
    </div>

</body>

3....Action代码:
@Component
@Scope("prototype")
@Namespace("/order")
@ParentPackage("struts-default")
public class OrderAction {
    @Autowired
private OrderService orderService;

    @Action(value="delOrder", results={@Result(name="success",location="/index.jsp"),
            @Result(name="error",location="/error.jsp") })
    public String delOrder(){

    String oid = ServletActionContext.getRequest().getParameter("orderNum");
    orderService.delOrder(oid);
    return "success";
    }
    @Action("findOrder")
    public void findOrder(){
        ServletActionContext.getResponse().setCharacterEncoding("utf-8");
        Integer customerId = Integer.parseInt(ServletActionContext.getRequest().getParameter("customerId"));
      //当前页
        Integer pageNum =Integer.parseInt(ServletActionContext.getRequest().getParameter("pageNum"));
        //每页显示的个数
        Integer currentCount =  Integer.parseInt(ServletActionContext.getRequest().getParameter("currentCount"));
    //根据Id查询客户

        PageBean<Order> pageBean=orderService.findOrderByCustomer(customerId,pageNum,currentCount);

        PropertyFilter filter=new PropertyFilter() {

            // 3.将orders转换成json(案例分析分页显示)
            // 对json数据进行过滤(可以过滤一些不需要的参数)，并且取消循环引用
            @Override
            public boolean apply(Object arg0, String fileName, Object arg2) {
                if(fileName.equalsIgnoreCase("cusPhone")){
                    return false;
                } if(fileName.equalsIgnoreCase("id")){
                    return false;
                } if(fileName.equalsIgnoreCase("orders")){
                    return false;
                }
            return true;
            }
        };

        String json = JSONArray.toJSONString(pageBean,filter,SerializerFeature.DisableCircularReferenceDetect);
        try {
            ServletActionContext.getResponse().getWriter().write(json);

    } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}
ajax 异步显示分页

猜你喜欢
