Блог

Я могу успешно заменить данные DataTable, но не столбцы. Я уверен, что смогу выяснить, как изменить текст заголовка столбца, однако это не сработает, если количество столбцов изменится. Как следует заменить как данные, так и имена заголовков столбцов?

 var dataTables;
document.getElementById('query-form').addEventListener('submit', function(event){
    event.preventDefault();
    var url = getUrl();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 amp;amp; this.status == 200) {
            var json = JSON.parse(this.response);
            if (dataTables) {
                console.log(dataTables)
                dataTables.clear();
                dataTables.rows.add(json.results.data);
                //dataTables.columns.add(json.results.columns);
                dataTables.draw();
            }
            else {
                dataTables = $('#datatables').DataTable( {
                    data: json.results.data,
                    columns: json.results.columns,
              } );
            }
        }
    };
    xhttp.open("GET", url);
    xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhttp.send();
});
  

Вы можете управлять своим ответом на вызов данных, например, массивом данных и столбцов, затем поместить мой код в свой вызов ajax или любые другие вызовы и решить вашу проблему с динамическими столбцами в таблицах данных.

 jQuery(document).ready(function() {
    var dataObject = eval('[{"COLUMNS": [{ "title": "Col1"}, { "title": "Col2"}], "DATA":[["RP","1"],["Billy","2"],["GP","3"],["MM","4"]]}]');
    var columns = [];
    $('#demoexample').dataTable({
        "data": dataObject[0].DATA,
        "columns": dataObject[0].COLUMNS
    }); 
});