How can i display on a datatable array data using Ajax?

Question

I'm using a MongoDB database to store some data. I now want to display this data on a HTML Datatable.

The data i'm trying to use is stored in arrays, here is how it is structured:

data: [[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

$(document).ready(function() {

    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/endpoint/?format=datatables",
        "columns": [

            {"data": 'data'},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

The problem with my actual code is that it will display the datatable like this:

    DATA:
[[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

While i would like it like this:

    DATA:
1848, 84857
4944, 949
36, 65 and so on

How can i fix this issue? I was thinkin with a foor loop, but i don't really know how to do that, since i'm calling the data straight in the table variable.

The json response is something like this:

{"data":"[[11756.53, 2.419583] .....

May i know your ajax response structure, if you inspected from network tab F12 of your browser — mike85
– mike85, Commented Aug 5, 2019 at 16:18

mike85 · Accepted Answer · 2019-08-05 17:16:47Z

1

You are using array of array data, just use index key to map your columns:

"columns": [
          {"data":0},
          {"data":1}
        ]

Awesome Example below:

function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min);
}
$.mockjax({
    url: "/endpoint/?format=datatables",
    response: function(settings) {
      this.responseText = {
        "draw": settings.data.draw,
        "recordsTotal": 4,
        "recordsFiltered": 4,
        "data": [
          [randomIntFromInterval(400, 8000), 84857], 
          [4944, 4949], 
          [34, 65], 
          [3566, 78]
        ]
      }
    }
});


var editable=false;

$(document).ready(function() {

    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/endpoint/?format=datatables",
        "columns": [
          {"data":0},
          {"data":1}
        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="mytable" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </tfoot>
      </table>

answered Aug 5, 2019 at 17:16

mike85

6314 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jack022 Over a year ago

Hey, thanks for your answer. Just one thing, can you explain what is the mockjax function doing? I tried using 0, but it's throwing an error

mike85 Over a year ago

@Jack022 mockjax is a Jquery API mocking for ajax request/response. Its for testing only. You can use Datatables without mockjax as you will use real ajax link.

Jack022 Over a year ago

Ok, got it! So i tried editing the column data to be like this: {data: 0} but it still doesn't work, i'm now trying to see why it failed from my console

mike85 Over a year ago

@Jack022 Did you try "columns": [{"data":0}, {"data":1}] ?

Jack022 Over a year ago

Yes, this is exactly what i'm trying!

|

Collectives™ on Stack Overflow

How can i display on a datatable array data using Ajax?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related