jquery+json實現數據列表分頁

該實例中,新聞數據列表未使用表格顯示。下面將所有源碼附上,其中用到jquery插件。

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<c:set var="ctx" value="${pageContext.request.contextPath}" />  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>Demo</title>  
          
        <script type="text/javascript" src="easyui/jquery-1.8.0.min.js"></script>  
  
        <script type="text/javascript" src="js/jquery.pagination.js"></script>  
  
        <link rel="stylesheet" href="js/pagination.css" type="text/css"></link>  
        <style type="text/css">  
body {  
    width: 100%;  
    height: 100%;  
    margin: 0 auto;  
    padding: 0;  
    background-color: #FFF;  
}  
  
#hen {  
    background-color: #000;  
    height: 50px;  
    margin: 0px;  
    padding: 12px 20px 2px 20px;  
    border: #CCC double 1px;  
}  
  
.page {  
    width: 1024px;  
    margin: 20px auto;  
    padding: 0;  
}  
  
#fm {  
    margin: 0;  
    padding: 10px 30px;  
}  
  
.ftitle {  
    font-size: 14px;  
    font-weight: bold;  
    color: #666;  
    padding: 5px 0;  
    margin-bottom: 10px;  
    border-bottom: 1px solid #ccc;  
}  
  
.fitem {  
    margin-bottom: 5px;  
}  
  
.fitem label {  
    display: inline-block;  
    width: 80px;  
}  
  
A {  
    text-decoration: none;  
}  
  
A:link {  
    text-decoration: none;  
    color: #000;  
}  
  
A:visited {  
    color: #000;  
    text-decoration: none  
}  
  
A:active {  
    color: #000;;  
    text-decoration: none  
}  
  
A:hover {  
    text-decoration: none;  
    color: red;  
}  
  
.d_over {  
    background-color: #EFEFEF;  
}  
  
.d_out {  
    background-color: #FFFFFF;  
}  
</style>  
  
        <script type="text/javascript">  
$(function(){//頁面加載時,進行綁定  
  
    bind(0);  
});  
  
//點擊分頁時調用的函數,page_id為當前頁的索引  
function pageselectCallback(page_id, jq) {  
    bind(page_id);  
}  
  
function bind(pageIndex)  
{  
    var temp="";  
    var total=0;  
    $.ajax({  
        type:"GET",  
        url:"sys/news.do?method=findByTopic&page="+(pageIndex+1),  
        async:false, ////作用是防止在ajax成功調用之前就調用$("#Pagination").pagination,這個時候數據個數還沒有初始化   
        dataType:"json",  
        data:"pageIndex="+(pageIndex+1),//傳遞頁面索引  
        //發送請求前,顯示加載動畫          
        beforeSend:function(){$("#pload").show();$("#datas #Pagination").hide()},  
        //請求完畢後,隱藏加載動畫  
        complete:function(){$("#pload").hide();$("#datas #Pagination").show()},  
        success:function(data){   
            var json=data.rows;//json數據  
            total=data.total;//記錄總數  
            $.each(json,function(index,item){  
                temp+="<p id='datas'  classdivclass=\"d_out\" onmouseover=\"this.className='d_over'\" "+  
                    "onmouseout=\"this.className='d_out'\" style='padding: 10px 15px 12px 15px;'>"+  
                    "<strong> <a style='font-size: 20px;' href='"+item.URL+"' target='_blank'>"+  
                         item.title+"</a></strong>"+  
                    "<p style='font-size: 14px; font-famliy: 宋體; text-indent: 2em; margin-top: 5px;'>"+  
                        item.summary+" }</p></p><hr />";  
            });     
            $("#datas").html(temp); //將創建的新行附加在DIV中  
        }  
        
      });  
  
    if(total!=0){  
         //調用分頁函數,將分頁插件綁定到id為Pagination的p上  
        $("#Pagination").pagination(total, { //recordCount在後臺定義的一個公有變量,通過從數據庫查詢記錄進行賦值,返回記錄的總數   
            callback: pageselectCallback,  //點擊分頁時,調用的回調函數  
            prev_text: '« 上一頁',  //顯示上一頁按鈕的文本  
            next_text: '下一頁 »',  //顯示下一頁按鈕的文本  
            items_per_page:10,  //每頁顯示的項數  
            num_display_entries:6,  //分頁插件中間顯示的按鈕數目  
            current_page:pageIndex,  //當前頁索引  
            num_edge_entries:2 //分頁插件左右兩邊顯示的按鈕數目  
              
        });  
     }   
      
}  
</script>  
    </head>  
    <body style="">  
        <!-- start header -->  
        <p id="hen">  
            <p style="color: #FFF;">  
                <h1 style="font-size: 20px;">  
                    實時動態  
                </h1>  
            </p>  
            <p style="text-align: right;">  
                <a  
                    style="color: #FFF; margin: 5px; text-decoration: none; cursor: pointer;"  
                    href="index.jsp">返回首頁</a>  
            </p>  
        </p>  
        <p class="page">  
            <p style="margin: 10px 0;"></p>  
            <p id="datas">  
            </p>  
            <p id="pload" style="text-align: center">  
                <img src="images/wait.gif" />  
            </p>  
            <p id="Pagination" class="digg"></p>  
        </p>  
        <br />  
        <br />  
    </body>  
</html>  

 

 

發佈留言