Posted Date:04-08-2017

In this post we will explain dynamic column header and result from ajax call in jquery datatable

 

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">

<source  src="http://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></source>
   <source type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></source>

Step 2: Add the following script for data table initialization with ajax call

<source>

    $( document ).ready( function( $ ) {
        $.ajax({
                "url": 'arrays.txt',
                success: function(json) {
                 
                    var tableHeaders='';
                    $.each(json.columns, function(i, val){
                        // console.log(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>');
                    //$("#tableDiv").find("table thead tr").append(tableHeaders);  
                     
                    $('#displayTable').dataTable(json);
                },
                "dataType": "json"
            });
    });
</source>

Step 3:Inside body tag write the following code

Step 3:Create one text file name as arrays.txt 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"
    ]
  ]
}

If you are following above step you will get code 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">

<source  src="http://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></source>
   <source type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></source>
<source>

    $( document ).ready( function( $ ) {
        $.ajax({
                "url": 'arrays.txt',
                success: function(json) {
                 
                    var tableHeaders='';
                    $.each(json.columns, function(i, val){
                        // console.log(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>');
                    //$("#tableDiv").find("table thead tr").append(tableHeaders);  
                     
                    $('#displayTable').dataTable(json);
                },
                "dataType": "json"
            });
    });
</source>
</head>
<body>
 


</body>
</html>

DEMO: http://demo.pheonixsolutions.com/php/datatable-ajax/dynamic-column-header.php

Post Views: 7,867

3 thoughts on “dynamic column header and result from ajax call in jquery datatable”

Leave a Reply