Pagination in ASP.net with Bootstrap JavaScript file

Joined:	18/12/2009
Level:	Silver
Points:	104

Points:	5

Hi,

I want to apply the below (please refer the attachment) pagination method in our ASP.net web application. Hence we are using bootstrap plugin "ui-bootstrap-tpls-2.5.0.js". I have tried to change the function but unable to do it. Could any one help me that how to do it....

below is my asp.net code to call that pagination function.

<ul uib-pagination total-items="totalProducts" ng-model="currentPage" max-size="maxSize" class="agProduct" boundary-link-numbers="true" items-per-page="itemsPerPage" ng-change="pageChangeHandler()"> </ul>

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

gridview is nothing but a combination of TD and TR rows.
checkout following CSS and see if it works for you


/*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 */

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

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

Pagination in ASP.net with Bootstrap JavaScript file

About dotnetspider.com

Quick Links

General

Services