Как динамически отображать заголовки столбцов в таблице данных jQuery

Question

У меня есть приведенный ниже код для отображения массива объектов, имеющих свойство и значение в таблице данных. Но здесь заголовки столбцов жестко закодированы, как показано в моем нижнем html-коде. Как я могу сделать его динамическим на основе входного набора данных?

var dataSet = [{ 
    "Latitude": 18.00, 
    "Longitude": 23.00, 
    "Name": "Pune" 
}, { 
    "Latitude": 14.00, 
    "Longitude": 24.00, 
    "Name": "Mumbai" 
}, { 
    "Latitude": 34.004654, 
    "Longitude": -4.005465, 
    "Name": "Delhi" 
},{ 
    "Latitude": 23.004564, 
    "Longitude": 23.007897, 
    "Name": "Jaipur" 
}]; 
$(document).ready(function() { 
    $('#example').DataTable({ 
     data: dataSet, 
     "columns": [ 
      { "data": "Name" ,"title":"Custom Name"}, 
      { "data": "Latitude" }, 
      { "data": "Longitude" }, 

     ] 
    }); 
}); 




<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Latitude</th> 
       <th>Longitude</th> 

      </tr> 
     </thead> 

    </table> 

Answer 1

Предполагая структуру объектов в наборе данных не меняется, вы можете использовать первый объект для построения объекта JSon внешнего по отношению к DataTable декларации. Если объекты не имеют согласованной структуры, то вы можете настроить логику внутри структуры $ .each, чтобы справиться с этим.

Вот быстрый хак:

var dataSet = [{ 
    "Latitude": 18.00, 
    "Longitude": 23.00, 
    "Name": "Pune" 
}, { 
    "Latitude": 14.00, 
    "Longitude": 24.00, 
    "Name": "Mumbai" 
}, { 
    "Latitude": 34.004654, 
    "Longitude": -4.005465, 
    "Name": "Delhi" 
}, { 
    "Latitude": 23.004564, 
    "Longitude": 23.007897, 
    "Name": "Jaipur" 
}]; 

var my_columns = []; 

$.each(dataSet[0], function(key, value) { 
     var my_item = {}; 
     my_item.data = key; 
     my_item.title = key; 
     my_columns.push(my_item); 
}); 

$(document).ready(function() { 
    $('#example').DataTable({ 
    data: dataSet, 
    "columns": my_columns 
    }); 
}); 

Вы должны также рассмотреть возможность удаления всех статического содержимого таблицы в формате HTML, как этот

<table id="example" class="display" cellspacing="0" width="100%"></table> 

Вот jsFiddle https://jsfiddle.net/z4t1po8o/18/

Весело.