Author

vaishali gurav
posted 1 posts
since Aug 19, 2010
from

Paging

Posted on: 19 Aug 2010

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim l_fcCanInfo As New fcCanInfo
Dim l_mcCanInfo As New mcCanInfo
Dim tblCan As New HtmlTable
Dim tblCan1 As New DataTable
Dim m_Name As String
'Session("NAME") = "K L Vyas,ARNAV G,Ashok Gurav,B P VAS,D Y Patil,G P Pradhan,JKJK,K M L,Krishna,P N MAN,PPG,Seema J,fdf"
m_ds = l_fcCanInfo.FetchSearchList()
l_mcCanInfo = l_fcCanInfo.Item
tblCan.Width = "420"
tblCan.CellPadding = "0"
tblCan.CellSpacing = "0"
tblCan.Style.Add(HtmlTextWriterStyle.BackgroundImage, "Images/MidCent.PNG")
Dim dc As DataColumn
Dim dr As DataRow
For Each dr In m_ds.Tables(0).Rows
Dim trow As New HtmlTableRow()
For Each dc In m_ds.Tables(0).Columns
Dim tcell As New HtmlTableCell()
Dim lnknm As New LinkButton
lnknm.ID = "lnkName"
tcell.Width = "140"
tcell.Height = "23"
If dc.ColumnName = "NAME" Then
lnknm.Text = dr(dc.ColumnName).ToString
tcell.Controls.Add(lnknm)
trow.Cells.Add(tcell)
m_Name = lnknm.Text
lnknm.PostBackUrl = "ShowInfo.aspx?&NAME=" & lnknm.PostBackUrl + lnknm.Text
Else
tcell.InnerText = dr(dc.ColumnName).ToString
trow.Cells.Add(tcell)
End If
Next
tblCan.Rows.Add(trow)
Next
Panel1.Controls.Add(tblCan)
End Sub

this my code i want paging in this

Shankey
posted 178 posts
since Aug 05, 2010
from

Re: Paging

Posted on: 19 Aug 2010

hi vaishali,

Following is sample html paging that you can implement:

But donot forget to accept my answer if it helped you

Html page code:
<html version="-//W3C//DTD HTML 4.01 Transitional//EN">

    <head>
        <style type="text/css">
            .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;
                cursor: pointer;
            }
            .pg-selected {
                color: black;
                font-weight: bold;
                text-decoration: underline;
                cursor: pointer;
            }
        </style>

        <script type="text/javascript" src="htmlpaging.js"></script>

    </head>

    <body>
        <form action="" method="get" enctype="application/x-www-form-urlencoded">
        <table id="results">
            <tr>
                <th>#</th>
                <th>field</th>
            </tr>
            <tr>
                <td>1</td>
                <td><input type="text" name="field-name" value="rec1"></td>
            </tr>
            <tr>
                <td>2</td>
                <td><input type="text" name="field-name" value="rec2"></td>
            </tr>
            <tr>
                <td>3</td>
                <td><input type="text" name="field-name" value="rec3"></td>
            </tr>
            <tr>
                <td>4</td>
                <td><input type="text" name="field-name" value="rec4"></td>
            </tr>
            <tr>
                <td>5</td>
                <td><input type="text" name="field-name" value="rec5"></td>
            </tr>
            <tr>
                <td>6</td>
                <td><input type="text" name="field-name" value="rec6"></td>
            </tr>
            <tr>
                <td>7</td>
                <td><input type="text" name="field-name" value="rec7"></td>
            </tr>
            <tr>
                <td>8</td>
                <td><input type="text" name="field-name" value="rec8"></td>
            </tr>
            <tr>
                <td>9</td>
                <td><input type="text" name="field-name" value="rec9"></td>
            </tr>
            <tr>
                <td>10</td>
                <td><input type="text" name="field-name" value="rec10"></td>
            </tr>
        </table>
        <div id="pageNavPosition"></div>
        <div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" /> <input type="reset" /></div>
    </form>

    <script type="text/javascript"></script>

    </body>
</html>

content of htmlpaging.js file

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"> &#171 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 &#187;</span>';            
        
        element.innerHTML = pagerHtml;
    }
}

If this post helped you, then tick the checkbox above "Do you like this Answer"

Shakey Shankey