JQuery-ajax-Pagination分页例子 -

zouwu85

浏览: 18822 次
性别:
来自: 北京

最近访客更多访客>>

wshcdr

zhangqingjie

derongit123

zwq666.com

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15)

社区版块

存档分类

JQuery-ajax-Pagination分页例子

Ajax jQuery CSS json JavaScript

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns ="http://www.w3.org/1999/xhtml">
<head>
    <title>file upload</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/pagination.css" />
       <link rel="stylesheet" href="<%=request.getContextPath()%>/css/demo.css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.pagination.js">

</script>

        <script type="text/javascript">

            $(document).ready(function(){
               $.ajax({
                       type : "POST",
                       url : "<%=request.getContextPath()%>/findForPage2.action", //此处是调用后台的ACTION
                       //data : "ws.gameid="+gameid,
                       dataType : "json",
                       success :function(data){
                                 initPagination(data);//data是返回来的json数据
                       }
                });
            });
           function initPagination(msg) {
                $("#Pagination").pagination(msg.listProduct.length, {
                    num_edge_entries: 2,
                    num_display_entries: 8,
                    callback: function(page_index,jq){
                               pageselectCallback(page_index,jq,msg);//回调函数，把json数据传过去以便显示时取数
                               },
                    items_per_page:2//每页两条
                });
             }

             function pageselectCallback(page_index, jq,msg){
                var new_content="";
                for(var i=page_index*2;i<(page_index+1)*2;i++)
                {
                    if(null!=msg.listProduct[i]){//判断如果存在那么多条记录才循环
                    new_content = "<tr>"+msg.listProduct[i].productname+"</tr>"+new_content;
                    }
                }
                $('#Searchresult').empty().append(new_content);
                return false;
            }

        </script>
</head>
<body>
       <h1>jQuery Pagination Plugin Demo</h1>
        <div id="Pagination"></div>
       <br style="clear:both;" />
        <div id="Searchresult">
           This content will be replaced when pagination inits.
       </div>
        <div id="hiddenresult" >

        </div>

</body>
</html>