How to use Data Table Plugin in Jquery

Training Mode Regular Fastrack Crash
Classroom | Online
Course Description :

Data Table

Data Table is a table with features like search, excel export , pdf export and pagination . It is very useful in web application to represent data in tabular form with its amazing features. It is very easy to integrate in html table by using their css and jquery cdn links.

There are some steps to use Data Table in webpage are as follows:

Step 1 : Create Table in html

<table class="table table-striped">

    <thead>

      <tr>

        <th>Firstname</th>

        <th>Lastname</th>

        <th>Email</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>John</td>

        <td>Doe</td>

        <td>[email protected]</td>

      </tr>

      <tr>

        <td>Mary</td>

        <td>Moe</td>

        <td>[email protected]</td>

      </tr>

      <tr>

        <td>July</td>

        <td>Dooley</td>

        <td>[email protected]</td>

      </tr>

    </tbody>

  </table>

 

Step 2 : Use css and jscdn link of datatable

Paste this css in your <head> </head> tag.

<link rel=”stylesheet” href=”https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css”>

 

Paste these two links before closing </body> tag.

 <script src=”https://code.jquery.com/jquery-3.3.1.js”></script>

<script src=”https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js”></script>

 

 

Step 3 :  Put id=”example ”  in your table tag.

 <table id=”example”></table>

 

Step 4 : paste this jquery code after jquery links:

 <script>

$(document).ready(function() {

    $('#example').DataTable();

} );

</script>

 

 

Request a Demo

Whatsapp