[ASP.net] jQuery Pager + ListView手寫資料分頁 (仿奇摩、巴哈姆特樣式，傳QueryString走Get Method分頁版)

2011-05-29

5464
0
ASP.net WebForm
2011-05-31

這是上一篇postback做法的續篇，傳QueryString用Get Method方法做分頁

這次就直接貼Code

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" %>

<html>

<head runat="server">

    <title>這是MasterPage</title>

    <!--預設奇摩樣式-->

    <link id="myCss" href="Yahoo.css" rel="stylesheet" type="text/css" />

    <!--引用jQuery核心函式庫-->

    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>   1:  
   2:     <!--引用jQuery Pager套件-->
   3:     <script src="jquery.pager.js" type="text/javascript">
   1: </script>
   2:     <script type="text/javascript" language="javascript">
   3:  
   4:         $(document).ready(function () {
   5:  
   6:             //pagenumber：目前頁數
   7:             //pagecount：總頁數
   8:             $("#pager").pager({ pagenumber: $('#<%= hiddenCurrentPage.ClientID %>').attr("value"),
   9:                 pagecount: $('#<%= initpagecount.ClientID %>').attr("value"),
  10:                 buttonClickCallback: PageClick
  11:             });
  12:  
  13:  
  14:  
  15:  
  16:             /*--以下兩個用來切換樣式*/
  17:             $("#yahooCss").click(
  18:               function () {
  19:                   var href = $(this).attr("title");
  20:                   //套用MasterPager後，link的myCss id名稱會亂掉，所以要用xxx.ClientID來抓
  21:                   $("#<%= myCss.ClientID%>").attr("href", href);
  22:                 
  23:               });
  24:  
  25:             $("#gamerCss").click(
  26:               function () {
  27:                   var href = $(this).attr("title");
  28:                   $("#<%= myCss.ClientID%>").attr("href", href);
  29:               });
  30:  
  31:         });
  32:  
  33:         PageClick = function (pageclickednumber) {//toPage
  34:             //pageclickednumber為jQuery Pager所點選的頁數
  35:            
  36:             $("#pager").pager({ pagenumber: pageclickednumber
  37:             , pagecount: $('#<%= initpagecount.ClientID %>').attr("value")
  38:             , buttonClickCallback: PageClick
  39:             });
  40:              //改變QueryString，再導向自己
  41:              window.location.href = "QueryStringMasterpage.aspx?currentPage=" + pageclickednumber; 
  42:            
  43:         }
  44:        
  45:     
</script>

</head>

<body>

    <form id="form1" runat="server">

        <asp:HiddenField runat="server" ID="initpagecount" Value="1" />

        <asp:HiddenField runat="server" ID="hiddenCurrentPage" Value="1" />

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />

    </form>

</body>

</html>

後置程式碼沒用到，所以我把它宰了。

QueryStringMasterpage.aspx Code

<%@ Page  Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

    CodeFile="QueryStringMasterpage.aspx.cs" Inherits="QueryStringMasterpage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

    <!--ListView呈現資料-->

    <asp:ListView ID="ListView1" runat="server">

        <ItemTemplate>

            <tr style="background-color: #eeeeee;">

                <td>

                    <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("ProductID") %>' />

                </td>

                <td>

                    <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />

                </td>

                <td>

                    <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("UnitPrice") %>' />

                </td>

            </tr>

        </ItemTemplate>

        <AlternatingItemTemplate>

            <tr style="background-color: #ffffff;">

                <td>

                    <asp:Label ID="CategoryIDLabel" runat="server" Text='<%# Eval("ProductID") %>' />

                </td>

                <td>

                    <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("ProductName") %>' />

                </td>

                <td>

                    <asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("UnitPrice") %>' />

                </td>

            </tr>

        </AlternatingItemTemplate>

        <LayoutTemplate>

            <table id="itemPlaceholderContainer" runat="server">

                <tr id="Tr1" runat="server" style="background-color: #07a; color: #000000;">

                    <th id="Th1" runat="server">

                        產品編號

                    </th>

                    <th id="Th2" runat="server">

                        產品名稱

                    </th>

                    <th id="Th3" runat="server">

                        單價

                    </th>

                </tr>

                <tr id="itemPlaceholder" runat="server">

                </tr>

            </table>

        </LayoutTemplate>

    </asp:ListView>

    <!--jQuery Pager套件的區塊-->

    <div id="pager">

    </div>

     <!--切換樣式-->

    <div>

        <input type="button" id="yahooCss" title="Yahoo.css" value="Yahoo樣式" />&nbsp;

        <input type="button" id="gamerCss" title="Gamer.css" value="巴哈姆特樣式" />

    </div>

</asp:Content>

QueryStringMasterpage.aspx.cs Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

//引用兩個空間

using System.Data;

using System.Data.SqlClient;

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

    string sqlQuery = "Select * from Products";

    string sqlOrder = "Order by ProductID";

    int pageSize = 5;//為了看出效果，每頁顯示5筆

    protected void Page_Load(object sender, EventArgs e)

        if (Request["currentPage"] == null)

            Response.Redirect("QueryStringMasterpage.aspx?currentPage=1");

        else

            ((HiddenField)Master.FindControl("hiddenCurrentPage")).Value = Request["currentPage"];

        if (!IsPostBack)

        {//Get Method時要做的動作

            int currentPage = int.Parse(((HiddenField)Master.FindControl("hiddenCurrentPage")).Value);

            showData(this.sqlQuery, this.sqlOrder, currentPage, this.pageSize);

    //顯示資料

    protected void showData(string sqlQuery, string sqlOrder, int currentPage, int pageSize)

        DataSet ds = getDataSet(sqlQuery, sqlOrder, currentPage, pageSize);

        ListView1.DataSource = ds.Tables[0];

        ListView1.DataBind();

        //totalPage總頁數

        ((HiddenField)Master.FindControl("initpagecount")).Value = ds.Tables[1].Rows[0][1].ToString();

    //撈資料

    protected DataSet getDataSet(string sqlQuery, string sqlOrder, int curretnPage, int pageSize)

        using (SqlConnection conn = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=NorthwindChinese;Integrated Security=True"))

            SqlCommand cmd = new SqlCommand("uSP_pageSQL_passPageNum",conn);

            cmd.CommandType = CommandType.StoredProcedure;//利用預存程式分頁資料References http://www.dotblogs.com.tw/shadow/archive/2011/05/22/25784.aspx

            cmd.Parameters.Add(new SqlParameter("sqlQuery", sqlQuery));

            cmd.Parameters.Add(new SqlParameter("sqlOrder", sqlOrder));

            cmd.Parameters.Add(new SqlParameter("currentPage", curretnPage));

            cmd.Parameters.Add(new SqlParameter("pageSize", pageSize));

            SqlDataAdapter da = new SqlDataAdapter(cmd);

            DataSet ds = new DataSet();

try

                conn.Open();

                da.Fill(ds);

                if (ds.Tables.Count > 0)

                    return ds;

                else

                    return new DataSet();

            finally

                conn.Close();

執行結果：

last

完整範例程式碼下載

回首頁