{"id":1899,"date":"2017-08-04T13:21:07","date_gmt":"2017-08-04T07:51:07","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=1899"},"modified":"2026-11-03T12:48:06","modified_gmt":"2026-11-03T07:18:06","slug":"dynamic-column-header-result-ajax-call-jquery-datatable","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/dynamic-column-header-result-ajax-call-jquery-datatable\/","title":{"rendered":"Dynamic Column Header and Result from AJAX Call in jQuery DataTable"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> August 04, 2017 <br><strong>Last Updated:<\/strong> November 02, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dynamic column headers<\/strong> 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery DataTables provides flexible options for loading and displaying data through AJAX requests. For more information, refer to the official <a href=\"https:\/\/datatables.net\/manual\/ajax\" target=\"_blank\" rel=\"noopener\">DataTables AJAX documentation<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before implementing the example, make sure that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>jQuery is included in the application.<\/li>\n\n\n\n<li>jQuery DataTables CSS and JavaScript files are included.<\/li>\n\n\n\n<li>The AJAX response is available in JSON format.<\/li>\n\n\n\n<li>The JSON response contains both column names and table data.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow-1024x683.png\" alt=\"\" class=\"wp-image-12760\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow-1024x683.png 1024w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow-300x200.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow-768x512.png 768w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow-272x182.png 272w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-jQuery-DataTable-AJAX-Workflow.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Include jQuery Plugin and CSS<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" type=\"text\/css\"\nhref=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.dataTables\/1.9.4\/css\/jquery.dataTables.css\">\n\n&lt;script src=\"http:\/\/code.jquery.com\/jquery-2.2.4.min.js\"\nintegrity=\"sha256-BbhdlvQf\/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\"\ncrossorigin=\"anonymous\">&lt;\/script>\n\n&lt;script type=\"text\/javascript\" charset=\"utf8\"\nsrc=\"https:\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.min.js\">&lt;\/script><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add the Following Script for DataTable Initialization with AJAX Call<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$(document).ready(function($) {\n\n    $.ajax({\n\n        \"url\": \"arrays.txt\",\n\n        success: function(json) {\n\n            var tableHeaders = '';\n\n            $.each(json.columns, function(i, val) {\n\n                tableHeaders += \"&lt;th>\" + val + \"&lt;\/th>\";\n\n            });\n\n            console.log(tableHeaders);\n\n            $(\"#tableDiv\").empty();\n\n            $(\"#tableDiv\").append(\n                '&lt;table id=\"displayTable\" class=\"display\" cellspacing=\"0\" width=\"100%\">' +\n                '&lt;thead>&lt;tr>' + tableHeaders + '&lt;\/tr>&lt;\/thead>' +\n                '&lt;\/table>'\n            );\n\n            $('#displayTable').dataTable(json);\n\n        },\n\n        \"dataType\": \"json\"\n\n    });\n\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Inside Body Tag Write the Following Code<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"tableDiv\">&lt;\/div><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Create a Text File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Create one text file named <code>arrays.txt<\/code> and add the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n    \"columns\": [\n        [\"Name\"],\n        [\"Position\"],\n        [\"Office\"],\n        [\"Extn.\"],\n        [\"Start date\"],\n        [\"Salary\"]\n    ],\n    \"data\": [\n        [\n            \"Tiger Nixon\",\n            \"System Architect\",\n            \"Edinburgh\",\n            \"5421\",\n            \"2011\/04\/25\",\n            \"$320,800\"\n        ],\n        [\n            \"Garrett Winters\",\n            \"Accountant\",\n            \"Tokyo\",\n            \"8422\",\n            \"2011\/07\/25\",\n            \"$170,750\"\n        ],\n        [\n            \"Ashton Cox\",\n            \"Junior Technical Author\",\n            \"San Francisco\",\n            \"1562\",\n            \"2009\/01\/12\",\n            \"$86,000\"\n        ],\n        [\n            \"Cedric Kelly\",\n            \"Senior Javascript Developer\",\n            \"Edinburgh\",\n            \"6224\",\n            \"2012\/03\/29\",\n            \"$433,060\"\n        ],\n        [\n            \"Airi Satou\",\n            \"Accountant\",\n            \"Tokyo\",\n            \"5407\",\n            \"2008\/11\/28\",\n            \"$162,700\"\n        ],\n        [\n            \"Brielle Williamson\",\n            \"Integration Specialist\",\n            \"New York\",\n            \"4804\",\n            \"2012\/12\/02\",\n            \"$372,000\"\n        ],\n        [\n            \"Herrod Chandler\",\n            \"Sales Assistant\",\n            \"San Francisco\",\n            \"9608\",\n            \"2012\/08\/06\",\n            \"$137,500\"\n        ],\n        [\n            \"Rhona Davidson\",\n            \"Integration Specialist\",\n            \"Tokyo\",\n            \"6200\",\n            \"2010\/10\/14\",\n            \"$327,900\"\n        ],\n        [\n            \"Colleen Hurst\",\n            \"Javascript Developer\",\n            \"San Francisco\",\n            \"2360\",\n            \"2009\/09\/15\",\n            \"$205,500\"\n        ]\n    ]\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Complete HTML Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you are following the above steps, you will get the following code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n\n&lt;html>\n\n&lt;head>\n\n&lt;title>Data Table&lt;\/title>\n\n&lt;!-- DataTables CSS -->\n\n&lt;link rel=\"stylesheet\" type=\"text\/css\"\nhref=\"http:\/\/ajax.aspnetcdn.com\/ajax\/jquery.dataTables\/1.9.4\/css\/jquery.dataTables.css\">\n\n&lt;script src=\"http:\/\/code.jquery.com\/jquery-2.2.4.min.js\"\nintegrity=\"sha256-BbhdlvQf\/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=\"\ncrossorigin=\"anonymous\">&lt;\/script>\n\n&lt;script type=\"text\/javascript\" charset=\"utf8\"\nsrc=\"https:\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.min.js\">&lt;\/script>\n\n&lt;script>\n\n$(document).ready(function($) {\n\n    $.ajax({\n\n        \"url\": \"arrays.txt\",\n\n        success: function(json) {\n\n            var tableHeaders = '';\n\n            $.each(json.columns, function(i, val) {\n\n                tableHeaders += \"&lt;th>\" + val + \"&lt;\/th>\";\n\n            });\n\n            console.log(tableHeaders);\n\n            $(\"#tableDiv\").empty();\n\n            $(\"#tableDiv\").append(\n                '&lt;table id=\"displayTable\" class=\"display\" cellspacing=\"0\" width=\"100%\">' +\n                '&lt;thead>&lt;tr>' + tableHeaders + '&lt;\/tr>&lt;\/thead>' +\n                '&lt;\/table>'\n            );\n\n            $('#displayTable').dataTable(json);\n\n        },\n\n        \"dataType\": \"json\"\n\n    });\n\n});\n\n&lt;\/script>\n\n&lt;\/head>\n\n&lt;body>\n\n&lt;div id=\"tableDiv\">&lt;\/div>\n\n&lt;\/body>\n\n&lt;\/html><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Can jQuery DataTables support dynamic column headers?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. Column headers can be generated dynamically from the JSON response before initializing the DataTable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Can DataTables load table data using an AJAX call?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. DataTables can work with data received through an AJAX request. In this example, the JSON data is loaded from the <code>arrays.txt<\/code> file.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. What format should the AJAX response use?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The example uses JSON containing two main sections: <code>columns<\/code> for the column headers and <code>data<\/code> for the table results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/selected-text-drop-list-select-box-using-jquery\/\">How to Get Selected Text and Value from a Drop-Down List Using jQuery<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to our experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 <a href=\"https:\/\/pheonixsolutions.com\/web-development\/\">Web Development Services<\/a>, from JavaScript integrations to full custom web applications.<br><br><a href=\"https:\/\/pheonixsolutions.com\/contact\">Connect with our technology experts.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: August 04, 2017 Last Updated: November 02, 2026 Introduction Dynamic column headers in jQuery DataTables are useful when [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[179,273],"class_list":["post-1899","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-architecture","tag-mysql-2","tag-php","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-uD","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2017\/08\/Dynamic-DataTables-with-AJAX-JSON.png","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=1899"}],"version-history":[{"count":4,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1899\/revisions"}],"predecessor-version":[{"id":12767,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1899\/revisions\/12767"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media\/12857"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=1899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=1899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=1899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}