jQuery

DataTable with searching, sorting, paging using jQuery

Amarnath DK
by Amarnath DK January 27, 2021
Pge2
How to implement searching, sorting, paging in a table. Answer is Datatable. Table plays very important role in software engineers life. Most of the applications uses Datatable somewhere were they want to list the users of their application or list of products they have or list of items whatever related to their Product or Project. In this blog we will discuss how to implement searching sorting and paging for a table using jquery datatable.

What is Datatable?

It is a jQuery Plugin used for a Table to convert to datatable which will have inbuild so many features like Searching, Sorting, Paging etc,.

1. HTML Table with headers
2. Adding Jquery and DataTable Links
3. Assigning some Json data to the Table and apply DataTable
4. Searching Sorting Paging all will come default.

Example1- With existing Table with Json Data

1. HTML table with Headers:


Open Visual Studio Code or some html editor and create a page name with index.html and Add one Table to it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTable Example</title>
</head>
<body>
    <table id='gridDataTable'>
        <thead>
            <th>
                Name 
            </th>
            <th>
                Age
            </th>
            <th>
                Car
            </th>
        </thead>
        <tbody >

        </tbody>
    </table>
    
</body>
</html>

table1

2.Adding jQuery and DataTable Links:

 jQuery : Add jQuery

<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>

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


pge4


Order should be jQuery then Data Table.

3. Assigning some Json data to the Table and apply DataTable

Add Script Tag after body and add Code to make table as Datatable and assign the data from json object.

<script>
    $(function(){
        var jsondata=[{ "id":0, "age":30, "car":"bmw" },
                      { "id":1, "age":32, "car":"Maruti" },
                      { "id":2, "age":30, "car":"great" },
                      { "id":3, "age":30, "car":"Nyc" },
                      { "id":4, "age":30, "car":"Super" },
                        ];
        $('#gridDataTable').DataTable({
            "aaData": jsondata,
             "aoColumns": [
                 { "mDataProp": "id",title:"ID" },
                 { "mDataProp": "age" },
                 { "mDataProp": "car" },
                
             ]
         });
    })
</script>


4. Searching Sorting Paging all will come default:

Open the index.html in browser then we can see the Datatable with search sort and paging by default.

pge4
All functionalities will work directly no need to write code for Searching, Sorting, Paging.


Example2- With existing Table with Ajax API Json Data

1. HTML Table with headers
2. Adding Jquery and DataTable Links
3. Assigning some Json data to the Table and apply DataTable
4. Searching Sorting Paging all will come default.

1. HTML Table with headers

Same page create one more table to see how Ajax data fetch works with datatable.

<h1>Example2- With existing Table with Ajax API Json Data</h1>
    <table id='gridDataTableAjax' width='100%'>
        <thead>
            <th>
                id 
            </th>
            <th>
                userid
            </th>
            <th>
                Title
            </th>
            <th>
                Completed
            </th>
        </thead>
        
    </table>

2. Adding Jquery and DataTable Links

Same as Above.


3. Assigning some Json data to the Table and apply DataTable

In Script add below code. Here i am using free api for showing demo.

$('#gridDataTableAjax').DataTable({
            "processing": true,
            "ajax": {
                "url":"https://jsonplaceholder.typicode.com/todos/",
                 "dataSrc":''
                },
            "columns": [
            { "data": "id" },
            { "data": "userId" },
            { "data": "title" },
            { "data": "completed" },
            
        ]
         });

4. Searching Sorting Paging all will come default:

Open the index.html in browser then we can see the Datatable with search sort and paging by default.
pge11

CodePen Link:

Github Link:

For More Info regarding datatable please visit their official website.


Thanks for Reading.

Please visit some of popular blogs.


Post a Comment

0 Comments