CODEWITHSUNDEEP
jquerycsstwitter-bootstrappagination
Nuru Salihu
Nuru Salihu

Reputation: 4928

Set active page in bootstrap pager (pagination)

i am using bootstrap pager for pagination. For some reason, i prefare the pager over the pagination feature. when i put the <ul class="pager"> inside the pagination class. It does not work and get mess up instead. I remove the pagination and the pager is working fine. I am generating my links dynamically like below.

<ul class="pager">
     <li class="previous disabled"><a href="#">&larr; Previous</a></li>
       <li class="disabled"><span>&laquo;</span></li>
       <li>@Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page = x}))</li>
     <li><a href="#">&raquo;</a></li>
    <li class="next"><a href="#"> Next &rarr;</a></li>
</ul>

my PageLinks is the html helper below.

public static MvcHtmlString PageLinks(this HtmlHelper html,
                                              PagingInfo pagingInfo,
                                              Func<int, string> pageUrl)
        {
            StringBuilder result = new StringBuilder();
            for (int i = 1; i < pagingInfo.TotalPages; i++)
            {
                TagBuilder tag = new TagBuilder("a"); //Construct an <a> tag
                tag.MergeAttribute("href", pageUrl(i));
                tag.InnerHtml = i.ToString();
                if (i == pagingInfo.CurrentPage)
                    tag.AddCssClass("active");

                result.Append(tag.ToString());

            }

            return MvcHtmlString.Create(result.ToString());

        }

My problem is i want to set the active selection property as returned from the htmlhelper method. I want to change the color when active. try adding 

<style type="text/css">
.li .active{
    background-color : blue
}
</style>

to my layout head tag. It does not work. try everything just to get an effect , but it fails. I try adding to my bootstrap.css bcos i notice under .pager there is no active property. It does not respond also.Please how do i achieve this? how do i make it work? any help would be appreciated.

Update

Actually i wanted to use the pagination class but it was not working totally. I try the default example yet it does not work. When i try the default example from boot strap , this is how it displays. However, the pager class works, so i have no option than to use the pager.

Upvotes: 2

Views: 15373

Answers (1)

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

try this html and css code i hops it help.

    .pager li.active > a, .pager li.active > span{
        background-color:#eee;
        pointer-events:none;
    }

HTML

<div class="pagination pagination-large">
    <ul class="pager"><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul>
</div>

Live Demo

Upvotes: 3

Related Questions