Pagination to HTML table

Question

I have referred to several SO questions and answers. Still I could not find a solution for pagination to tables. Please someone provide me the appropriate javascript coding for pagination with necessary plugins(if any). My table is filled with data from API call. Thanks in advance

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
      xmlns:width="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Telephone Extension Finder</title>
    <link href = "css/bootstrap.min.css" rel = "stylesheet">
    <link href = "css/main.css" rel = "stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>


</head>

<body>


        <div id = "tableDiv" class = "tab-pane fade in active">
            <table  id = "myTable"
                    class= "table-responsive container table table-hover table-bordered table-striped"
                    style="width:35%; margin-right: 15%;">
                        <thead style = "background-color: #800080; color: white;">
                            <th style = "width: 5%">Name</th>
                            <th style = "width: 1.2%">Code</th>
                        </thead>
                        <tbody></tbody>
            </table>
        </div>

    <script src = "js/jquery-3.2.1.min.js"></script>
    <script src ="js/bootstrap.min.js"></script>
    <script src = "js/main.js"></script>
    <script src = "js/impExt.js"></script>
    <script src="js/confRoom.js"></script>

    </body>
</html>

Above is my HTML page

sdebarun · Accepted Answer · 2018-01-11T16:51:50.903

I think what you want is a pagination in the tables. I have a solution. You can use datatables. This is a very good plugin. https://datatables.net go to this link and see. It is compatible with bootstrap and responsive too. Check the examples . Hope it will help. enter image description here

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
   xmlns:width="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Telephone Extension Finder</title>
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      <link href = "css/main.css" rel = "stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
   </head>
   <body>
      <div id = "tableDiv" class = "tab-pane fade in active">
         <table  id = "myTable"
            class= "table-responsive container table table-hover table-bordered table-striped"
            style="width:35%; margin-right: 15%;">
            <thead style = "background-color: #800080; color: white;">
               <th style = "width: 5%">Name</th>
               <th style = "width: 1.2%">Code</th>
            </thead>
            <tfoot>
               <tr>
                  <th style = "width: 5%">Name</th>
                  <th style = "width: 1.2%">Code</th>
               </tr>
            </tfoot>
            <tbody>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Garrett Winters</td>
                  <td>Accountant</td>
               </tr>
               <tr>
                  <td>Ashton Cox</td>
                  <td>Junior Technical Author</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
               <tr>
                  <td>Tiger Nixon</td>
                  <td>System Architect</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script src = "js/jquery-3.2.1.min.js"></script>
      <script src = "js/main.js"></script>
      <script src = "js/impExt.js"></script>
      <script src="js/confRoom.js"></script>
      <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $('#myTable').DataTable();
         } );
      </script>
   </body>
</html>

Sorry for the images. I have taken them from my phone. But hope you can understand the point. — sdebarun, Jan 11 '18 at 11:09
Thanks for the link. But I have already referred to that link eralier. I am getting an error on jquery.datatables.js as jquery.dataTables.js:56 Uncaught ReferenceError: jQuery is not defined. Can you tell me how to fix this error? — Parkavi, Jan 11 '18 at 11:24
It would be better if you can share the code snippet. But i guess jquery is not called before that file jquery.datatables.js.. check that. Hope it is going to solve the problem. — sdebarun, Jan 11 '18 at 11:31
use that in top of html. Say in the head. Then call all datatable js files. — sdebarun, Jan 11 '18 at 11:33
Still it is not working. I have updatedmy question with my code! — Parkavi, Jan 11 '18 at 12:29
i think i understand the problem. first of all make sure you are connected to internet to use those datatables files in your script. if not connected, go to the links and copy the contents and save them with their respective names. now put the js file of datatable in your script after the file "". so that datatable can access the jquery library function at the time of parsing. — sdebarun, Jan 11 '18 at 16:34
jQuery is not defined this error was there because you were calling jquery.dataTables.js file before the jquery-3.2.1.min.js was initialized (it is the main library file of jquery which datatable was trying the access at the time of parsing but the library had not initialized by that time). hope this will help you. — sdebarun, Jan 11 '18 at 16:37
I have editted my answer by adding your code with a little modification so that you can understand. check that. — sdebarun, Jan 11 '18 at 16:53
Thanks. Your answer worked for me but the allignments went bad. I can take care of them! Can you also tell me how to control the number records per page — Parkavi, Jan 12 '18 at 03:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163032/discussion-between-d-saha-and-techlearn). — sdebarun, Jan 12 '18 at 05:46
$('#example').dataTable( { "pageLength": 50 } );. This should work. Though i have never tested it.. — sdebarun, Jan 12 '18 at 05:47

Pagination to HTML table

1 Answers1