ajax 异步显示分页

来源：互联网发布：随心安软件编辑：程序博客网时间：2024/05/24 02:56
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 {    @Autowiredprivate 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();        }    }}
阅读全文
0 0