{"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-09-01T18:46:38","modified_gmt":"2026-09-01T13:16:38","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<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">jQuery DataTables provides an easy way to display data in an interactive and user-friendly table. In some applications, the table structure and column names may not be fixed and need to be generated dynamically based on data received from an AJAX request.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post we will explain how to create <strong>dynamic column headers and display results from an AJAX call using jQuery DataTables<\/strong>.<\/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<h2 class=\"wp-block-heading\">Implementation<\/h2>\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<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\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\">Looking for the right technology solution for your business? Our team of experts can help you with development, cloud, DevOps, design, and a wide range of other technology needs. Get in touch with our team&nbsp;<a href=\"https:\/\/pheonixsolutions.com\/contact\" rel=\"noreferrer noopener\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction jQuery DataTables provides an easy way to display data in an interactive and user-friendly table. In some applications, the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"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_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","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":"","_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":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1899\/revisions"}],"predecessor-version":[{"id":11305,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/1899\/revisions\/11305"}],"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}]}}