Getting Started with jQuery DataTables Plug-in

Getting Started with jQuery DataTables Plug-in

by

Jquery data table plugin is basically a javascript library. It is very useful jquery plugin for creating html table listing. This plugin have lots of feature by default like searching, sorting and pagination.

This tutorial is about basic usage of jquery datatables plugin.

There are many other datatable plugin which allows you to export data table into csv,pdf or excel.  

In this example we will learn basic use of jquery datatables plugin and also see jQuery datatable example.

Step 1. Include CSS and JS file before head closing tag.

        <!--DataTable CSS-->
        <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

        <!--jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!--DataTable JS-->
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

Step 2. Create an HTML table

            <table id="pclu">
                <thead>
                    <tr><th>Sl</th><th>Topic</th></tr>
                </thead>

                <tbody>
                    <tr><td>1</td> <td>PHP</td></tr>
                    <tr><td>2</td> <td>MySQL</td></tr>
                    <tr><td>3</td> <td>JavaScript</td></tr>
                    <tr><td>4</td> <td>jQuery</td></tr>
                    <tr><td>5</td> <td>AJAX</td></tr>
                </tbody>
            </table>

Step 3. Add datatables functionality on above table

 <script>
            $(document).ready(function () {
                $("#pclu").dataTable();
            });
  </script>

Full snippet:

<!DOCTYPE html>
<!--
Website       : http://www.phpcluster.com
Author        : Vikash Kumar Singh
Tutorial      : Basic jQuery DataTable Example
-->
<html>
    <head>
        <title>jQuery DataTable Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--DataTable CSS-->
        <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
        <!--jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <!--DataTable JS-->
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#pclu").dataTable();
            });
        </script>

    </head>
    <body>
        <div>
            <h1>jQuery DataTable Example</h1>

            <table id="pclu">
                <thead>
                    <tr><th>Sl</th><th>Topic</th></tr>
                </thead>

                <tbody>
                    <tr><td>1</td> <td>PHP</td></tr>
                    <tr><td>2</td> <td>MySQL</td></tr>
                    <tr><td>3</td> <td>JavaScript</td></tr>
                    <tr><td>4</td> <td>jQuery</td></tr>
                    <tr><td>5</td> <td>AJAX</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Live Demo

Leave a Comment