Please enable Javascript for better experience...
Implement paging in HTML table
By Big | Sep 29, 2014 | In Articles | Update: Sep 29, 2014 | Total Views [ 12915 ]
Taged In
(8 Like)
Rate

In this article I will try to demonstrate, how can we implement paging in HTML table.

Introduction

Grid control is the most popular control to show a list of data with inbuild features like paging or filters. But do you know that behind the scene grids uses HTML table format to render. Then how they show paging or other such features. Can we implement these features without using a Grid control? I will say yes. In this article I will show, how can we implement paging and search in HTML table. I am using DataTable plugin in my example. You can use any other plugin like bootstrap.

Using the code

Let's start step by step. First of all let's see the plugins references which I am using in this example. Below are the plugin references I am using except bootstrap.css

  • dataTables.bootstrap.css
  • jquery.dataTables.js
  • dataTables.bootstrap.js

Plugin References

Let's add css and jquery referennces to my page.

<head>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="CSS/dataTables.bootstrap.css">
    
   <link rel="stylesheet" type="text/css" href="CSS/Style.css">
 <script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="JS/jquery.dataTables.js"></script>
    <script type="text/javascript" src="JS/dataTables.bootstrap.js"></script>
</head>

HTML

Now it's time to add HTML. Below is my HTML.

<div class="body-content">
        <h3>Paging in HTML table-Example</h3>
    <hr />
    <table id="tblContact" class="table table-striped table-bordered" cellspacing="0" style="width:100%;">
        <thead>
            <tr>
                <th>S No</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>Joe</td>
                <td>Dean</td>
                <td>36</td>
                <td>United State</td>
            </tr>

            <tr>
                <td>2</td>
                <td>Tim</td>
                <td>Pass</td>
                <td>50</td>
                <td>United State</td>
            </tr>

            <tr>
                <td>3</td>
                <td>Ajay</td>
                <td>Yadav</td>
                <td>23</td>
                <td>India</td>
            </tr>

            <tr>
                <td>4</td>
                <td>Sonu</td>
                <td>Bahel</td>
                <td>20</td>
                <td>India</td>
            </tr>

            <tr>
                <td>5</td>
                <td>Chang</td>
                <td>Lee</td>
                <td>50</td>
                <td>China</td>
            </tr>

            <tr>
                <td>6</td>
                <td>Joe</td>
                <td>Li</td>
                <td>34</td>
                <td>United State</td>
            </tr>

            <tr>
                <td>7</td>
                <td>Chang</td>
                <td>Le</td>
                <td>50</td>
                <td>China</td>
            </tr>

            <tr>
                <td>8</td>
                <td>Rong</td>
                <td>Lee</td>
                <td>20</td>
                <td>China</td>
            </tr>

            <tr>
                <td>9</td>
                <td>Mahesh</td>
                <td>Kumar</td>
                <td>28</td>
                <td>India</td>
            </tr>

            <tr>
                <td>10</td>
                <td>Ajay</td>
                <td>Bansal</td>
                <td>54</td>
                <td>India</td>
            </tr>

        </tbody>
    </table>

       
</div>

Adding script

I am almost done. After HTML code now let's add few lines of script to make my table functional.

 <script type="text/javascript">
      $(document).ready(function () {
          $('#tblContact').dataTable({
              "iDisplayLength": 5,
              "lengthMenu": [5,10, 25, 50, 100]
          });
      });
  </script>

And I am done. You will find a good looking table with features like paging and search. You can search any column of your choice. Hope this can help help. Use this code and try yourself.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment