JQuery-ajax-Pagination分页例子

<%@ 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>

 

不明白的联系:QQ 654865674
JQuery-ajax-Pagination分页例子JQuery-ajax-Pagination分页例子

你可能感兴趣的:(JavaScript,jquery,json,Ajax,css)