ajax分页2：jquery.pagination +JSON 动态无刷新分页

浏览数：21 / 时间：2015年06月09日

aspx 页面:

技术分享

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %>

<!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 runat="server">
    <title></title>
    <link href="css/pagination.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server" >
    <div>
        <table id="tblData" width="80%" cellpadding="1" cellspacing="1" bgcolor="gray" style="text-align:center">
            <tr>
                <td>
                    NewsID
                </td>
                <td>
                    Title
                </td>
                <td>
                    SmallClassName
                </td>
                <td>
                    Author
                </td>
                <td>
                    UpdateTime
                </td>
            </tr>
        </table>
        <div id="Pagination">
        </div>
    </div>

    </form>
</body>
</html>

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

<script src="js/jquery.pagination.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
 var pageIndex =0;     //页索引
 var pageSize =20;    //每页显示的条数
    $(function() {
    Init(0);          
        $("#Pagination").pagination(<%=pageCount %>, {            
             callback: PageCallback,            
             prev_text: ‘上一页‘,             
             next_text: ‘下一页‘,              
             items_per_page: pageSize,              
             num_display_entries: 5,        
             current_page: pageIndex,           
             num_edge_entries: 1         
         });                   
         function PageCallback(index, jq) {        
              Init(index);        
         }
    });

    function Init(pageIndex) {
        $.ajax({
            type: "POST",
            dataType: "text",
            url: ‘SqlPage.aspx‘,              
            data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,                                 
            success: function(data) {
                if(data!=""){
                 $("#tblData tr:gt(0)").remove();//移除所有的数据行
                 data=$.parseJSON(data);                        
                        $.each(data.News,function(index,news){
                       $("#tblData").append("<tr bgcolor=‘white‘><td>"+news.NewsID+"</td><td algin=‘left‘>"+news.Title+"</td><td>"+news.SmallClassName+"</td><td>"+news.Author+"</td><td>"+news.Updatetime+"</td></tr>");  //将返回的数据追加到表格
                    });                   
                }
            }
        });

    }
</script>