Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Table pagination using html

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 433
    Comment on it

    Table pagination is a simple code that will give new effect to the user for creating a long html table into compact manner, This can be possible through simple line of code of javascript and html, for better look and touch up User will use css too. This table help in slecting the large number of pages in a very less time, This will save lots of time and be able to handle large number of data. Html line of code gives user number of rows and column of the table whereas javascript add functionality to the table.

    HTML Source Code:

    <table class="paginated">
        <thead>
            <tr>
                <th scope="col">A</th>
                <th scope="col">B</th>  
                <th scope="col">C</th> 
                <th scope="col">D</th>
            </tr>
        </thead>
        <tbody>
          <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr> 
    
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>   
        </tbody>
    </table>
    

    CSS Source Code:
     

    table {
        width: 40em;
        margin: 2em auto;
    }
    
    thead {
        background: #000;
        color: #fff;
    }
    
    td {
        width: 10em;
        padding: 0.3em;
    }
    
    tbody {
        background: #ccc;
    }
    
    div.pager {
        text-align: center;
        margin: 1em 0;
    }
    
    div.pager span {
        display: inline-block;
        width: 1.8em;
        height: 1.8em;
        line-height: 1.8;
        text-align: center;
        cursor: pointer;
        background: #000;
        color: #fff;
        margin-right: 0.5em;
    }
    
    div.pager span.active {
        background: #c00;
    }

    JAVASCRIPT Source Code:

    $('table.paginated').each(function() {
        var currentPage = 0;
        var numPerPage = 10;
        var $table = $(this);
        $table.bind('repaginate', function() {
            $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        var numRows = $table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<div class="pager"></div>');
        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number"></span>').text(page + 1).bind('click', {
                newPage: page
            }, function(event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }
        $pager.insertBefore($table).find('span.page-number:first').addClass('active');
    });

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: