PagedList.Mvc ellipsis button does not work

Question

I am using PagedList.Mvc for paging in my MVC 5 app.

Question: The ellipsis button, which is after page#10 in screen shot below, does not do anything when clicked. Is that how its supposed to be, or I can make the ellipsis button work so clicking it would display the next set of pages?

The html helper being used in the View for displaying this pager is as below.

@Html.PagedListPager(Model, page => Url.Action("Index", 
 new { page, sortOrder = ViewBag.CurrentSort, SearchText = ViewBag.SearchText }))

Answer 1

The solution that worked is to hide the ellipsis button.

SOLUTION

This solution involves hiding the ellipsis button. For this, you would need to make sure that the property of DisplayEllipsesWhenNotShowingAllPageNumbers under PagedListRenderOptions class is set to false, since its true by default. Its this setting that causes the pager to show the ellipsis button.

The code snippet given below will go into your View or PartialView html, and you will need to change some of the custom parameters like sortOrder and action name etc.

Hide Ellipsis button when Pager is ajaxified

@Html.PagedListPager(Model,
 page => Url.Action("GetOrderDetails", new { page, sortOrder = ViewBag.CurrentSort,
 , command = "paging", PageSize = ViewBag.PageSize }), 
 PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing( 
 new PagedListRenderOptions { DisplayEllipsesWhenNotShowingAllPageNumbers = false},
 new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "gridTable",
 OnBegin = "OnBegin", OnSuccess = "OnSuccess" }))

Hide Ellipsis button when Pager is non-ajaxified

@Html.PagedListPager(Model, page => Url.Action("Index", new { page, 
sortOrder = ViewBag.CurrentSort, command = "paging", PageSize = ViewBag.PageSize}),
new PagedListRenderOptions { DisplayEllipsesWhenNotShowingAllPageNumbers = false })

ANOTHER SOLUTION

Download the source code from GitHub at https://github.com/troygoode/PagedList and open the solution in Visual Studio.

In HtmlHelper.cs class add the following 2 methods.

private static TagBuilder PreviousEllipsis(IPagedList list, Func<int, string> generatePageUrl, PagedListRenderOptions options, int firstPageToDisplay)
    {
        var targetPageNumber = firstPageToDisplay - 1;//list.PageNumber - 1;
        var previous = new TagBuilder("a")
        {
            InnerHtml = string.Format(options.EllipsesFormat, targetPageNumber)
        };
        previous.Attributes["rel"] = "prev";

        if (!list.HasPreviousPage)
            return WrapInListItem(previous, options, "PagedList-skipToPrevious","disabled");

        previous.Attributes["href"] = generatePageUrl(targetPageNumber);
        return WrapInListItem(previous, options, "PagedList-skipToPrevious");
    }
    private static TagBuilder NextEllipsis(IPagedList list, Func<int, string> generatePageUrl, PagedListRenderOptions options, int lastPageToDisplay)
    {
        var targetPageNumber = lastPageToDisplay + 1;// list.PageNumber  +1;
        var next = new TagBuilder("a")
        {
            InnerHtml = string.Format(options.EllipsesFormat, targetPageNumber)
        };
        next.Attributes["rel"] = "next";

        if (!list.HasNextPage)
            return   WrapInListItem(next, options, "PagedList-skipToNext", "disabled");

        next.Attributes["href"] = generatePageUrl(targetPageNumber);
        return WrapInListItem(next, options, "PagedList-skipToNext");
    }

In same HtmlHelper.cs, replace an existing method of PagedListPager with following code. There are only 2 changes in this code and these are the 2 lines inserted just before the commented line of //listItemLinks.Add(Ellipses(options));. There are 2 places in the method where this line appeared in original code, and these have been commented and replaced by calls to the new methods defined in above code snippet.

    ///<summary>
    /// Displays a configurable paging control for instances of PagedList.
    ///</summary>
    ///<param name = "html">This method is meant to hook off HtmlHelper as an extension method.</param>
    ///<param name = "list">The PagedList to use as the data source.</param>
    ///<param name = "generatePageUrl">A function that takes the page number  of the desired page and returns a URL-string that will load that page.</param>
    ///<param name = "options">Formatting options.</param>
    ///<returns>Outputs the paging control HTML.</returns>
    public static MvcHtmlString PagedListPager(this System.Web.Mvc.HtmlHelper html,
                                               IPagedList list,
                                               Func<int, string> generatePageUrl,
                                               PagedListRenderOptions options)
    {
        if (options.Display == PagedListDisplayMode.Never || (options.Display == PagedListDisplayMode.IfNeeded && list.PageCount <= 1))
            return null;

        var listItemLinks = new List<TagBuilder>();

        //calculate start and end of range of page numbers
        var firstPageToDisplay = 1;
        var lastPageToDisplay = list.PageCount;
        var pageNumbersToDisplay = lastPageToDisplay;
        if (options.MaximumPageNumbersToDisplay.HasValue && list.PageCount > options.MaximumPageNumbersToDisplay)
        {
            // cannot fit all pages into pager
            var maxPageNumbersToDisplay = options.MaximumPageNumbersToDisplay.Value;
            firstPageToDisplay = list.PageNumber - maxPageNumbersToDisplay / 2;
            if (firstPageToDisplay < 1)
                firstPageToDisplay = 1;
            pageNumbersToDisplay = maxPageNumbersToDisplay;
            lastPageToDisplay = firstPageToDisplay + pageNumbersToDisplay - 1;
            if (lastPageToDisplay > list.PageCount)
                firstPageToDisplay = list.PageCount - maxPageNumbersToDisplay + 1;
        }


        //first
        if (options.DisplayLinkToFirstPage == PagedListDisplayMode.Always || (options.DisplayLinkToFirstPage == PagedListDisplayMode.IfNeeded && firstPageToDisplay > 1))
            listItemLinks.Add(First(list, generatePageUrl, options));

        //previous
        if (options.DisplayLinkToPreviousPage == PagedListDisplayMode.Always || (options.DisplayLinkToPreviousPage == PagedListDisplayMode.IfNeeded && !list.IsFirstPage))
            listItemLinks.Add(Previous(list, generatePageUrl, options));

        //text
        if (options.DisplayPageCountAndCurrentLocation)
            listItemLinks.Add(PageCountAndLocationText(list, options));

        //text
        if (options.DisplayItemSliceAndTotal)
            listItemLinks.Add(ItemSliceAndTotalText(list, options));

        //page
        if (options.DisplayLinkToIndividualPages)
        {
            //if there are previous page numbers not displayed, show an ellipsis
            if (options.DisplayEllipsesWhenNotShowingAllPageNumbers && firstPageToDisplay > 1)
                listItemLinks.Add(PreviousEllipsis(list, generatePageUrl, options, firstPageToDisplay));
                //listItemLinks.Add(Ellipses(options));

            foreach (var i in Enumerable.Range(firstPageToDisplay, pageNumbersToDisplay))
            {
                //show delimiter between page numbers
                if (i > firstPageToDisplay && !string.IsNullOrWhiteSpace(options.DelimiterBetweenPageNumbers))
                    listItemLinks.Add(WrapInListItem(options.DelimiterBetweenPageNumbers));

                //show page number link
                listItemLinks.Add(Page(i, list, generatePageUrl, options));
            }

            //if there are subsequent page numbers not displayed, show an ellipsis
            if (options.DisplayEllipsesWhenNotShowingAllPageNumbers && (firstPageToDisplay + pageNumbersToDisplay - 1) < list.PageCount)
                listItemLinks.Add(NextEllipsis(list, generatePageUrl, options, lastPageToDisplay));
                //listItemLinks.Add(Ellipses(options));
        }

        //next
        if (options.DisplayLinkToNextPage == PagedListDisplayMode.Always || (options.DisplayLinkToNextPage == PagedListDisplayMode.IfNeeded && !list.IsLastPage))
            listItemLinks.Add(Next(list, generatePageUrl, options));

        //last
        if (options.DisplayLinkToLastPage == PagedListDisplayMode.Always || (options.DisplayLinkToLastPage == PagedListDisplayMode.IfNeeded && lastPageToDisplay < list.PageCount))
            listItemLinks.Add(Last(list, generatePageUrl, options));

        if(listItemLinks.Any())
        {
            //append class to first item in list?
            if (!string.IsNullOrWhiteSpace(options.ClassToApplyToFirstListItemInPager))
                listItemLinks.First().AddCssClass(options.ClassToApplyToFirstListItemInPager);

            //append class to last item in list?
            if (!string.IsNullOrWhiteSpace(options.ClassToApplyToLastListItemInPager))
                listItemLinks.Last().AddCssClass(options.ClassToApplyToLastListItemInPager);

            //append classes to all list item links
            foreach (var li in listItemLinks)
                foreach (var c in options.LiElementClasses ?? Enumerable.Empty<string>())
                    li.AddCssClass(c);
        }

        //collapse all of the list items into one big string
        var listItemLinksString = listItemLinks.Aggregate(
            new StringBuilder(),
            (sb, listItem) => sb.Append(listItem.ToString()),
            sb=> sb.ToString()
            );

        var ul = new TagBuilder("ul")
                    {
                        InnerHtml = listItemLinksString
                    };
        foreach (var c in options.UlElementClasses ?? Enumerable.Empty<string>())
            ul.AddCssClass(c);

        var outerDiv = new TagBuilder("div");
        foreach(var c in options.ContainerDivClasses ?? Enumerable.Empty<string>())
            outerDiv.AddCssClass(c);
        outerDiv.InnerHtml = ul.ToString();

        return new MvcHtmlString(outerDiv.ToString());
    }

Then, rebuild the code and copy over the dlls to your bin folder. After this you will find that the ellipsis button is enabled, and will take you to the page just before the first page of current set of page numbers, or the page just after this current set. I tested this and it worked.