Easy bootstrap pagination for asp.net Gridview

Facebooktwittergoogle_pluslinkedinmail

 

I was recently working with asp.net gridview in bootsrap template. Pagination is given in ul li format in bootstrap css in .pagination class.But asp.net gridview control dynamically takes pagination in a nested table.I was recently working with asp.net gridview in bootsrap template. Pagination is given in ul li format in bootstrap css in .pagination class.But asp.net gridview control dynamically takes pagination in a nested table.But after watching closely gridview pagination  html tags I found a simple solution .

That  is nothing but modifying  .table class which we use in gridview. Gridview pagination row is within table and the current page number is kept within span control unlike others page links.

 

CSS Solutions : modification of table class not pagination one

So here is the trick..

put bootstrap css on header

<link href="css/bootstrap.css" rel="stylesheet" />

Now we need to  modify pager in gridiew write css rules for .table  table – similer to ul li of .pagination class.

some thing like this.

Add extra css for .table and nested table in it like below.These properties  are taken from . pagination css.

/*gridview*/
.table table  tbody  tr  td a ,
.table table  tbody  tr  td  span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

.table table > tbody > tr > td > span {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}

.table table > tbody > tr > td:first-child > a,
.table table > tbody > tr > td:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.table table > tbody > tr > td:last-child > a,
.table table > tbody > tr > td:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.table table > tbody > tr > td > a:hover,
.table   table > tbody > tr > td > span:hover,
.table table > tbody > tr > td > a:focus,
.table table > tbody > tr > td > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
/*end gridview */

Now your gridview pagination class is ready

now put this class in gridview like this

 <asp:GridView ID="GridView1" CssClass="table table-striped table-bordered table-hover" runat="server" PageSize="10" AllowPaging="true" ></asp:GridView>

Now add this code in page load in code view to dtabind gridview

 DataTable dt = new DataTable();
            dt.Columns.Add("Sl");
            dt.Columns.Add("data");
            dt.Columns.Add("heading1");
            dt.Columns.Add("heading2");
            for (int i = 0; i < 100; i++)
            {
                dt.Rows.Add(new object[] { i ,123*i, 4567*i , 2*i ,  });
            }
           
            GridView1.DataSource = dt;
            GridView1.DataBind();

Here is the ouput shown below:

boostrap Gridview pagination without pager style

boostrap Gridview pagination

I have also posted this tip in http://www.codeproject.com/Tips/1085031/Easy-Bootstrap-Pagination-for-ASP-NET-Gridview

 

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *