Asp.net中类似于QQ相册中的分页功能怎么实现？

Question

要这样形式的 上一页 1234 下一页，中间的 有多少也是几个数字应该怎么实现？

Answer 1

参见
http://dotnet.aspx.cc/file/Add-Delete-Update-Edit-Data-With-Paging-in-GridView.aspx

Answer 2

/*ul pagination*/jQuery.fn.paging = function(pageOptions, togglefn, options) {
    pageOptions = jQuery.extend({
        page_size: 5,
        num_display_entries: 5,
        page_id: 0,
        total_count: 10,
        prev_text: "<",
        next_text: ">",
        first_text: "<<",
        last_text: ">>",
        parentTag: "<div/>",
        itemTag: "<label/>",
        separator: "",
        containerClass: "AlbumPhotoPage",
        hrefPattern: "",
        pageFlag: "{index}"
    }, pageOptions || {});
    var parent = this;
    var divPages = $(pageOptions.parentTag).attr("class", pageOptions.containerClass);
    var pages = 0;
    var targeturl = null;
    var nohref = "#";    var isAjax = pageOptions.hrefPattern.length == 0;
    if (isAjax) {
        targeturl = "javascript:void(0)";
    } else {
        targeturl = pageOptions.hrefPattern;
    }    var lblSeparator = undefined;
    if (pageOptions.separator.length > 0) {
        lblSeparator = pageOptions.separator;
    }    if (pageOptions.total_count > pageOptions.page_size) {        pages = Math.ceil(pageOptions.total_count / pageOptions.page_size);
        var lblFirst = $(pageOptions.itemTag);
        if (pageOptions.page_id == "1") {
            $("<a href='#' disabled=\"true\">" + pageOptions.first_text + "</a>").appendTo(lblFirst);
        }
        else {
            if (isAjax) {
                $("<a href='" + nohref + "'>" + pageOptions.first_text + "</a>").appendTo(lblFirst);
                lblFirst.click(function() { return options != null ? togglefn(options, 1) : togglefn(1); });
            }
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, 1) + "'>" + pageOptions.first_text + "</a>").appendTo(lblFirst);
        }
        lblFirst.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);
        var prevPg = pageOptions.page_id > 1 ? pageOptions.page_id - 1 : pageOptions.page_id;
        var lblPrev = $(pageOptions.itemTag);
        if (pageOptions.page_id == prevPg) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
        }
        else {
            if (isAjax) {
                $("<a href='" + nohref + "'>" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
                lblPrev.click(function() { return options != null ? togglefn(options, prevPg) : togglefn(prevPg); });
            }
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, prevPg) + "'>" + pageOptions.prev_text + "</a>").appendTo(lblPrev);
        }
        lblPrev.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);
        if (pageOptions.num_display_entries % 2 == 0) {
            pageOptions.num_display_entries += 1;
        }
        if (pages > pageOptions.num_display_entries) {
            var ne_half = Math.ceil((pageOptions.num_display_entries - 1) / 2);
            var startIdx = 1, endIdx = 5;
            var upper_limit = pages - pageOptions.num_display_entries;
            startIdx = pageOptions.page_id > ne_half ? Math.max(Math.min(pageOptions.page_id - ne_half, upper_limit), 0) : 0;
            endIdx = pageOptions.page_id > ne_half ? Math.min(pageOptions.page_id + ne_half, pages) : Math.min(pageOptions.num_display_entries, pages);
            if (startIdx == 0)
                startIdx = 1;            //add front "..."
            if (pageOptions.page_id - 1 > pageOptions.num_display_entries || startIdx > 1) {
                var prevsp = pageOptions.page_id - pageOptions.num_display_entries;
                if (prevsp < 1)
                    prevsp = 1;
                var lnksp = null;
                if (isAjax) {
                    lnksp = $("<a href='" + nohref + "'>...</a>");
                    lnksp.click(function() { return options != null ? togglefn(options, prevsp) : togglefn(prevsp); });
                }
                else {
                    lnksp = $("<a href='" + targeturl.replace(pageOptions.pageFlag, prevsp) + "'>...</a>");
                }                lnksp.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
            //alert(startIdx + "," + endIdx);
            for (var icnts = startIdx; icnts <= endIdx; icnts++) {
                var lblItem = $(pageOptions.itemTag);
                var lnkHtml = null;
                if (icnts == pageOptions.page_id) {
                    lnkHtml = $("<span style='color:red;' >" + icnts + "</span>");
                }
                else {
                    if (isAjax) {
                        lnkHtml = $("<a href='" + nohref + "'>" + icnts + "</a>");
                        lnkHtml.click(function() { var currenPg = parseInt($(this).text()); return options != null ? togglefn(options, currenPg) : togglefn(currenPg); });
                    }
                    else {
                        lnkHtml = $("<a href='" + targeturl.replace(pageOptions.pageFlag, icnts) + "'>" + icnts + "</a>");
                    }
                }
                lnkHtml.appendTo(lblItem);
                lblItem.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }            //add back "..."
            if (pageOptions.page_id + pageOptions.num_display_entries < pages || endIdx < pages) {
                var nextsp = pageOptions.page_id + pageOptions.num_display_entries;
                var lnksp2 = null;
                if (isAjax) {
                    lnksp2 = $("<a href='" + nohref + "'>...</a>");
                    lnksp2.click(function() { return options != null ? togglefn(options, nextsp) : togglefn(nextsp); });
                }
                else
                    lnksp2 = $("<a href='" + targeturl.replace(pageOptions.pageFlag, nextsp) + "'>...<a/>");
                lnksp2.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
        }
        else {
            for (var icnts = 1; icnts <= pages; icnts++) {
                var lblItem = $(pageOptions.itemTag);
                var lnkHtml = null;
                if (icnts == pageOptions.page_id) {
                    lnkHtml = $("<span style='color:red;'>" + icnts + "</span>");
                }
                else {
                    if (isAjax) {
                        lnkHtml = $("<a href='" + nohref + "'>" + icnts + "</a>");
                        lnkHtml.click(function() { var currenPg = parseInt($(this).text()); return options != null ? togglefn(options, currenPg) : togglefn(currenPg); });
                    }
                    else {
                        lnkHtml = $("<a href='" + targeturl.replace(pageOptions.pageFlag, icnts) + "'>" + icnts + "</a>");
                    }
                }
                lnkHtml.appendTo(lblItem);
                lblItem.appendTo(divPages);
                if (lblSeparator)
                    $(lblSeparator).appendTo(divPages);
            }
        }        var nextPg = pageOptions.page_id < pages ? pageOptions.page_id + 1 : pages;
        var lblNext = $(pageOptions.itemTag);
        if (pageOptions.page_id == nextPg) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.next_text + "</a>").appendTo(lblNext);
        }
        else {
            if (isAjax)
                $("<a href='" + nohref + "'>" + pageOptions.next_text + "</a>").click(function() { return options != null ? togglefn(options, nextPg) : togglefn(nextPg); }).appendTo(lblNext);
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, nextPg) + "'>" + pageOptions.next_text + "</a>").appendTo(lblNext);
        }
        lblNext.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);        var lblLast = $(pageOptions.itemTag);
        if (pageOptions.page_id == pages) {
            $("<a href='" + nohref + "' disabled=\"true\">" + pageOptions.last_text + "</a>").appendTo(lblLast);
        }
        else {
            if (isAjax)
                $("<a href='" + nohref + "'>" + pageOptions.last_text + "</a>").click(function() { return options != null ? togglefn(options, pages) : togglefn(pages); }).appendTo(lblLast);
            else
                $("<a href='" + targeturl.replace(pageOptions.pageFlag, pages) + "'>" + pageOptions.last_text + "</a>").appendTo(lblLast);
        }
        lblLast.appendTo(divPages);
        if (lblSeparator)
            $(lblSeparator).appendTo(divPages);        divPages.appendTo(parent);
    }
}

Answer 3

Listview+Pager控件
纯JS的话可以JQuery
或者ExtJS

Answer 4

http://www.open-open.com/ajax/Image.htm

Answer 5

在Repeater控件内实现分页功能：页面中代码<asp:Repeater ID="RptJobList" runat="server" OnItemDataBound="RptJobList_ItemDataBound"><FooterTemplate><td  align = "right" height="30" width = "828" colspan="2" style="font-size:10pt;color:#636363;">
            <asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlfir" runat="server" Text="第一页"></asp:HyperLink>
                &nbsp;
            <asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlp" runat="server" Text="上一页"></asp:HyperLink>
                &nbsp;
            <asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hln" runat="server" Text="下一页"></asp:HyperLink>
                &nbsp;
            <asp:HyperLink colspan="2" style="font-size:10pt;color:#636363;" ID="hlla" runat="server" Text="最后一页"></asp:HyperLink>
                &nbsp;&nbsp;&nbsp; 转到第
         <asp:DropDownList ID="ddlp" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlp_SelectedIndexChanged" >
         </asp:DropDownList>页
</td></FooterTemplate>
</asp:Repeater>.CS代码：数据绑定函数[自己补充完整即可]PagedDataSource pds = new PagedDataSource();
                pds.DataSource = dt.DefaultView;
                pds.AllowPaging = true;//允许分页
                pds.PageSize = 20;//单页显示项数
                pds.CurrentPageIndex = Convert.ToInt32(Request.QueryString["page"]);        /// <summary>
        /// Repeater控件分页 处理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void RptJobList_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Footer)
            {
                DropDownList ddlp = (DropDownList)e.Item.FindControl("ddlp");                HyperLink lpfirst = (HyperLink)e.Item.FindControl("hlfir");
                HyperLink lpprev = (HyperLink)e.Item.FindControl("hlp");
                HyperLink lpnext = (HyperLink)e.Item.FindControl("hln");
                HyperLink lplast = (HyperLink)e.Item.FindControl("hlla");
                PagedDataSource ps = pds();
                string a1 = Request.QueryString["page"];
                ps.CurrentPageIndex = Convert.ToInt32(a1);                int n = Convert.ToInt32(ps.PageCount);//n为分页数
                int i = Convert.ToInt32(ps.CurrentPageIndex);//i为当前页                Label lblpc = (Label)e.Item.FindControl("lblpc");                //if (!IsPostBack)
                //{
                    for (int j = 0; j < n; j++)
                    {
                        ddlp.Items.Add(Convert.ToString(j + 1));
                    }
                //}                    string addUrl = "&&testType=" + ddlWorkType.SelectedValue + "&&provinceId=" + ddlProvince.SelectedValue + "&&jobclassId" + ddlJobclass.SelectedValue;
                if (i <= 0)
                {
                    lpfirst.Enabled = false;
                    lpprev.Enabled = false;
                    lplast.Enabled = true;
                    lpnext.Enabled = true;
                }
                else
                {
                    lpprev.NavigateUrl = "?page=" + (i - 1) + addUrl;
                }
                if (i >= n - 1)
                {
                    lpfirst.Enabled = true;
                    lplast.Enabled = false;
                    lpnext.Enabled = false;
                    lpprev.Enabled = true;
                }
                else
                {
                    ViewState["i"] = i;
                    lpnext.NavigateUrl = "?page=" + (i + 1) + addUrl;
                }                lpfirst.NavigateUrl = "?page=0" + addUrl; //向本页传递参数page 
                lplast.NavigateUrl = "?page=" + (n - 1) + addUrl;                ddlp.SelectedIndex = Convert.ToInt32(ps.CurrentPageIndex);//更新下拉列表框中的当前选中页序号
            }
        }        /// <summary>
        /// 转到第N页
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void ddlp_SelectedIndexChanged(object sender, EventArgs e)
        {
            //脚模板中的下拉列表框更改时激发
            string pg = Convert.ToString((Convert.ToInt32(((DropDownList)sender).SelectedValue) - 1));//获取列表框当前选中项
            ViewState["pageCount"] = pg;//
            Response.Redirect("parttime_joblist.aspx?page=" + pg + "&&testType=" + ddlWorkType.SelectedValue + "&&provinceId=" + ddlProvince.SelectedValue + "&&jobclassId" + ddlJobclass.SelectedValue); //页面转向 
        }本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/hongjiaoli/archive/2010/09/20/5897585.aspx