How to make Pagination in aspx page without using Gridview

Question

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;'>&nbsp;</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;'>&nbsp;</td></tr>";
                    sHTML += "<tr><td style='border-left:#0b77bc solid 1px;'>&nbsp;</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'>&nbsp;</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...