How use title data in datatable json?

I want the table title and table body use url to read data.

such as "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},


$(document).ready(function () {


 $('#example').DataTable({ 

  "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},

  lengthMenu: [25, 50, 75, 100],


  data: {url:'/dataSet.json'},
  columns: {url:'/columns.json'}
  });
  
});

$(document).ready(function () {


 var dataSet = [
{"name":"name1","name2":"name2"},
{"name":"name1","name2":"name2"},
];

$('#example').DataTable({ 
 "language": {url:'https://cdn.datatables.net/plug-ins/1.10.25/i18n/English.json'},

  lengthMenu: [25, 50, 75, 100],
 

  data: dataSet,
  columns: [

{ title:"Title1",data: "name" },
{ title:"Title2",data: "name2" }

  
  ]
  
 });
  
});

 tfoot {

  display: table-header-group;
}
 }

 <!DOCTYPE html>
<html>
  <head>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<!-- Select2 plugin -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<!-- Select2 plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>

  </head>
  <body>

<div class="container">
 <table id="example" width="100%"></table>

 </div>
 </body>
</html>

How can do that?

Any help would be appreciated.

Solution

Here is an example using a jQuery ajax approach:

Assume we have a URL which returns the following JSON:

{
  "responseData": {
    "headings": [
      {
        "title": "Name",
        "data": "name"
      },
      {
        "title": "Position",
        "data": "position"
      },
      {
        "title": "Salary",
        "data": "salary"
      },
      {
        "title": "Start Date",
        "data": "start_date"
      },
      {
        "title": "Office",
        "data": "office"
      },
      {
        "title": "Age",
        "data": "age"
      }
    ],
    "body": [
      {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "age": "23"
      },
      {
        "name": "Lael Greer",
        "position": "Systems Administrator",
        "salary": "$103,500",
        "start_date": "2009/02/27",
        "office": "London",
        "age": "24"
      },
      {
        "name": "Jonas Alexander",
        "position": "Developer",
        "salary": "$86,500",
        "start_date": "2010/07/14",
        "office": "San Francisco",
        "age": "54"
      },
      {
        "name": "Shad Decker",
        "position": "Regional Director",
        "salary": "$183,000",
        "start_date": "2008/11/13",
        "office": "Edinburgh",
        "age": "43"
      }
    ]
  }
}

The overall structure can be summarized as this:

{
  "responseData": {
    "headings": [ { ... }, { ... }, ... ],
    "body": [ { ... }, { ... }, ... ]
  }
}

Now we have the data needed for all our data rows in one section of the JSON, and the titles (column headings) in another section.

The DataTable can be fed this data from a jQuery ajax call:

$(document).ready(function() {

  $.ajax({
      url: "YOUR_URL_GOES_HERE",
    method: "POST",
    success: function(json) {
      initializeDataTable(json);
    }
  });

  function initializeDataTable(json) {
    $('#example').DataTable( {
      "data": json.responseData.body,
      "columns": json.responseData.headings
    } );
  }

} );

And the HTML table is simply this:

<table id="example" class="display" style="width:100%"></table>

So, now there are no specific column names anywhere in the HTML or the DataTable definition. All that data is provided by the JSON.

You can add more data to the JSON, to control other aspects of the DataTable - for example , the initial sort order, and so on.