使用jquery.pagination +JSON 【实现】动态无刷新分页

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

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>

cs代码:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;



public partial class SqlPage : System.Web.UI.Page

{   

    public int pageCount = 0;

    public static string connString = "server=192.168.1.91;database=ReportDB;uid=sa;pwd=123456";



    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            pageCount = GetTotalPage();

            if (Request["pageIndex"] != null && Request["pageSize"] != null)

            {

                int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);

                int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);

                Response.Write(GetOnePage(pageSize, pageIndex));

                Response.End();

            }

        }

    }



    public int GetTotalPage()

    {

        DBHelper.connString = connString;

        string sql = "select count(*) from News";

        int rs = Convert.ToInt32(DBHelper.ExecuteScalar(sql));        

        return rs;

    }



    public string GetOnePage(int pageSize, int pageIndex)

    {

        DBHelper.connString = connString;

        string sql = string.Empty;

        sql = "SELECT TOP " + pageSize + " NewsID,Title,SmallClassName,Author,Updatetime FROM News WHERE NewsID NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsID FROM News ORDER BY NewsID DESC) ORDER BY NewsID DESC";

  

        DataTable dt = DBHelper.QueryBySql(sql);      

        return ConvertJson.ToJson(dt, "News");

    }

   

}

你可能感兴趣的:(pagination)