Generate datagrid fom ajax

Mzambon

Hello, I apologize in advance I'm a beginner. I have to load data and columns dynamically through an ajax call: I have a php script that connects to Microsoft SQL Server and generates a table with variabiles columns, but I get this error back:

TypeError: a[j[i]] is not a function
    at c (datatables.min.js:31)
    at datatables.min.js:31
    at Object.b.fnGetData (datatables.min.js:24)
    at B (datatables.min.js:29)
    at Ga (datatables.min.js:36)
    at M (datatables.min.js:28)
    at e (datatables.min.js:104)
    at HTMLTableElement.<anonymous> (datatables.min.js:104)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)

here is my code:

$("#loadTbl").click(function(){
  $.ajax({
    url: 'classi/ajaxCall1.php',
      data: {
        field1: $('#field option:selected').val(),
        field2: 0
      }
    }).done(function(columns) {
    var stringJson = '[';
    $.each(jQuery.parseJSON(columns), function(key, value){
      stringJson += '{ "data": "' + value['Name'] + '(' + value['Measure'] + ')" },';
    });
    stringJson = stringJson.substr(0, stringJson.length - 1) + ']';
    $.ajax({
      url: 'classi/ajaxCall2.php',
      data: {
        data_start: $('#data_start').val(),
        data_end: $('#data_end').val(),
        field1: $('#field option:selected').val(),
        type: $('#type option:selected').val(),
        field2: 1
      }
    }).done(function(datas) {
      if(datas == "") return;
      if ($.fn.dataTable.isDataTable('#table_id')) {
        table = $('#table_id').DataTable();
        table.destroy();
      }
      $('#table_id').DataTable({
        paging: false,
        select: true,
        data: jQuery.parseJSON(datas),
        columns: jQuery.parseJSON(stringJson)
      });
    });
});

can somebody help me please?

bindrid

In all honesty, your code is a bit mess up. However, before we can really help you, we need to see what the contents of your ajax column call and the data structure being returned by your data ajax call (not sure why you don't do it all at once).

colin

Hi @Mzambon,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Looking at just the code, the problem is likely to be either datas or stringJson not matching the expected format - so that's the place to start debugging.

Cheers,

Colin

bindrid

also, you are creating json parsing the columns then trying to build it into a string to parse again. You should parse the columns once then build the columns object from that.

Mzambon

In all honesty, your code is a little messed up

I'm so sorry

test case running

I'm sorry, I found it hard to do it

Let me explain, I have this table:

Date | Time | Measure name | Measure value | Measure validity
20180529 | 00: 00: 00 | Oxygen | xyz | VAL\ERR
20180529 | 00: 00: 00 | NOX | xyz | VAL\ERR
... (many other records)

I made a PHP script to turn it into this format:

Date | Time | Oxygen | Oxygen validity | NOX | NOX validity ... (many other columns)
20180529 | 00: 00: 00 | xyz | VAL\ERR | xyz | VAL\ERR ...

if I write with the php all the html code (Example echo "<tr> <td> ...") and after, I call the datatable script it works, but it is very slow.

the problem is, that I do not know how many columns I will have, so I have to dynamically generate both columns and rows.
the first 'classi/ajaxCall1.php' executes a 'SELECT DISTINCT [Measure Name] FROM [table]' and returns an array with the columns
the second returns an array of JSON with all the data in the json format:

[
// lines 0
[
"20180529"
"00:00:00",
"Xyz"
"Xyz"
...
]
// lines 1
[
"20180529"
"00:00:00",
"Xyz"
"Xyz"
...
]
...
]

kthorngren

Here is an example of building a dynamic table. This example the key names of the first returned object to build the column names. It uses columns.title to build the column headers. You can do something similar and return an object containing the column names and another containing the data.

http://live.datatables.net/regatofe/1/edit

Kevin