Dear All,
I did pagination controls for HTML table view. please check below the code is not working. please help me to resolved.
Codebhind :
sHTML += "<div style='padding-top:14px;'>";
sHTML += "<table id='tablepaging' width='100%' border='0' cellspacing='0' cellpadding='0'>";
sHTML += "<tr><td width='10' class='promo_corners_TOP_LEFT'></td>";
sHTML += "<td style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='194' style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='81' style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='85' style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='80' style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='31' style='border-top:#0b77bc solid 1px;'></td>";
sHTML += "<td width='10' class='promo_corner_TOP_RIGHT'></td></tr>";
sHTML += "<tr><td style='border-left:#0b77bc solid 1px;'> </td>";
sHTML += "<td width='100' rowspan='2' align='center'><img src='" + file + "' width='92' height='89' align='left' /></td>";
sHTML += "<td height='44' class='promo_heading_text'>Promotion</td>";
sHTML += "<td class='promo_heading_text'>Codes Promotion</td>";
sHTML += "<td class='promo_heading_text'>Coupons Remaining </td>";
sHTML += "<td class='promo_heading_text'>Discount</td>";
sHTML += "<td align='center'><a href='#'><img src='images/icon_plus.gif' width='24' height='24' align='middle' /></a></td>";
sHTML += "<td style='border-right:#0b77bc solid 1px;'> </td></tr>";
sHTML += "<tr><td style='border-left:#0b77bc solid 1px;'> </td>";
sHTML += "<td class='promo_BG'><div class='promo_text'>" + dsCurPromo.Tables[0].Rows[i]["title"] + "</div>";
sHTML += "<div class='promo_more'><a href='Details.aspx?id=" + dsCurPromo.Tables[0].Rows[i]["mopon_campaign_id"] + "'>Click here for more details</a></div>";
sHTML += "<div class='promo_remaining'>" + sDaysRemain + "</div></td>";
sHTML += "<td valign='top' class='promo_promocode promo_BG'>" + dsCurPromo.Tables[0].Rows[i]["mopon_code"] + "</td>";
sHTML += "<td valign='top' class='promo_normal promo_BG'>Unlimited</td>";
sHTML += "<td valign='top' class='promo_normal promo_BG'>" + iDisc + "%</td>";
sHTML += "<td align='center' class='promo_BG'><a href='#' onclick=\"javascript:window.open('refferal.aspx')\"><img src='images/icon_refer.gif' width='30' height='30' align='middle' /></a></td>";
sHTML += "<td style='border-right:#0b77bc solid 1px;' class='promo_BG'> </td></tr>";
sHTML += "<tr><td class='promo_corner_BOTTOM_LEFT'></td>";
sHTML += "<td style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td bgcolor='#d3dfee' style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td bgcolor='#d3dfee' style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td bgcolor='#d3dfee' style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td bgcolor='#d3dfee' style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td bgcolor='#d3dfee' style='border-bottom:#0b77bc solid 1px;'></td>";
sHTML += "<td class='promo_corner_BOTTOM_RIGHT'></td></tr></table></div>";
}
divCurPromo.InnerHtml = sHTML;
aspx page :
<div class="code">
<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
pagerHtml += '<span onclick="'+pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
</script>
</div> <div class="code"></div> <div class="code">
<div id="pageNavPosition" style="padding-top: 20px" align="center">
</div>
<script type="text/javascript"><!-- var pager = new Pager('divCurPromo', 5); pager.init();
pager.showPageNav('pager', 'pageNavPosition'); pager.showPage(1); </script></div> <div class="code">
</div> <div class="code">
Please Check above coding part. and giude me, if I'm doing anything wrong.</div> <div class="code">
</div> <div class="code">
</div> <div class="code">
</div> <div class="code">
</div>
Anyhelp will be much more appreciated.
Waiting for your kind responses...