Dynamic Column Header and Result from AJAX Call in jQuery DataTable

Post Date: August 04, 2017
Last Updated: November 02, 2026

Introduction

Dynamic column headers in jQuery DataTables are useful when developing applications where table columns and their names are generated based on data received from an AJAX request. Instead of defining table headers manually, developers can create them dynamically using a JSON response.

jQuery DataTables provides flexible options for loading and displaying data through AJAX requests. For more information, refer to the official DataTables AJAX documentation.

In this tutorial, we will explain how to generate dynamic column headers, retrieve table data from an AJAX request, and display the results using jQuery DataTables.

Prerequisites

Before implementing the example, make sure that:

• jQuery is included in the application.
• jQuery DataTables CSS and JavaScript files are included.
• The AJAX response is available in JSON format.
• The JSON response contains both column names and table data.

Implementation

In this implementation, we will use jQuery AJAX to retrieve column names and row data from a JSON file. We will then generate dynamic column headers in jQuery DataTables and initialize the table with the retrieved data. Follow the steps below to implement this functionality.

Step 1: Include jQuery Plugin and CSS

<link rel="stylesheet" type="text/css"
href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>

<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

Step 2: Add the Following Script for DataTable Initialization with AJAX Call

$(document).ready(function($) {

    $.ajax({

        "url": "arrays.txt",

        success: function(json) {

            var tableHeaders = '';

            $.each(json.columns, function(i, val) {

                tableHeaders += "<th>" + val + "</th>";

            });

            console.log(tableHeaders);

            $("#tableDiv").empty();

            $("#tableDiv").append(
                '<table id="displayTable" class="display" cellspacing="0" width="100%">' +
                '<thead><tr>' + tableHeaders + '</tr></thead>' +
                '</table>'
            );

            $('#displayTable').dataTable(json);

        },

        "dataType": "json"

    });

});

Step 3: Inside Body Tag Write the Following Code

<div id="tableDiv"></div>

Step 4: Create a Text File

Create one text file named arrays.txt and add the following code:

{
    "columns": [
        ["Name"],
        ["Position"],
        ["Office"],
        ["Extn."],
        ["Start date"],
        ["Salary"]
    ],
    "data": [
        [
            "Tiger Nixon",
            "System Architect",
            "Edinburgh",
            "5421",
            "2011/04/25",
            "$320,800"
        ],
        [
            "Garrett Winters",
            "Accountant",
            "Tokyo",
            "8422",
            "2011/07/25",
            "$170,750"
        ],
        [
            "Ashton Cox",
            "Junior Technical Author",
            "San Francisco",
            "1562",
            "2009/01/12",
            "$86,000"
        ],
        [
            "Cedric Kelly",
            "Senior Javascript Developer",
            "Edinburgh",
            "6224",
            "2012/03/29",
            "$433,060"
        ],
        [
            "Airi Satou",
            "Accountant",
            "Tokyo",
            "5407",
            "2008/11/28",
            "$162,700"
        ],
        [
            "Brielle Williamson",
            "Integration Specialist",
            "New York",
            "4804",
            "2012/12/02",
            "$372,000"
        ],
        [
            "Herrod Chandler",
            "Sales Assistant",
            "San Francisco",
            "9608",
            "2012/08/06",
            "$137,500"
        ],
        [
            "Rhona Davidson",
            "Integration Specialist",
            "Tokyo",
            "6200",
            "2010/10/14",
            "$327,900"
        ],
        [
            "Colleen Hurst",
            "Javascript Developer",
            "San Francisco",
            "2360",
            "2009/09/15",
            "$205,500"
        ]
    ]
}

Step 5: Complete HTML Code

If you are following the above steps, you will get the following code:

<!DOCTYPE html>

<html>

<head>

<title>Data Table</title>

<!-- DataTables CSS -->

<link rel="stylesheet" type="text/css"
href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<script src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>

<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<script>

$(document).ready(function($) {

    $.ajax({

        "url": "arrays.txt",

        success: function(json) {

            var tableHeaders = '';

            $.each(json.columns, function(i, val) {

                tableHeaders += "<th>" + val + "</th>";

            });

            console.log(tableHeaders);

            $("#tableDiv").empty();

            $("#tableDiv").append(
                '<table id="displayTable" class="display" cellspacing="0" width="100%">' +
                '<thead><tr>' + tableHeaders + '</tr></thead>' +
                '</table>'
            );

            $('#displayTable').dataTable(json);

        },

        "dataType": "json"

    });

});

</script>

</head>

<body>

<div id="tableDiv"></div>

</body>

</html>

Conclusion

Using dynamic column headers in jQuery DataTables makes it easier to build flexible data tables when the number of columns or their names change based on the AJAX response.

Using the above approach, the column headers and table results can be generated dynamically from the JSON response received through an AJAX call. This approach is useful when the table structure and data are not fixed and need to be loaded dynamically.

Frequently Asked Questions

1. Can jQuery DataTables support dynamic column headers?

Yes. Column headers can be generated dynamically from the JSON response before initializing the DataTable.

2. Can DataTables load table data using an AJAX call?

Yes. DataTables can work with data received through an AJAX request. In this example, the JSON data is loaded from the arrays.txt file.

3. What format should the AJAX response use?

The example uses JSON containing two main sections: columns for the column headers and data for the table results.

Related Articles

How to Get Selected Text and Value from a Drop-Down List Using jQuery

Talk to our experts

Working with dynamic tables, AJAX data, or interactive dashboards on your website? Our team can help you build fast, flexible front ends and data-driven features with our Web Development Services, from JavaScript integrations to full custom web applications.

Connect with our technology experts.