Why is my datatable not populating?

bazianm

I have been out of coding for a while so I am a little rusty. I have a datatable setup as follows:

Here's the HTML setup:

          <table id="tblList" class="display">
              <thead>
                  <tr>
                      <th>Actions</th>
                      <th>Staff Type</th>
                      <th>ID</th>
                  </tr>
              </thead>
              <tbody>
              </tbody>
            </table>

The script at the bottom of the page

  <script>
  $(document).ready(function() {
    $("#tblList").DataTable({
      ajax: {
        url: "/stafftypes/ajaxLoadData",
        type: "post",
        columns: [
          { data: 'Action' },
          { data: 'cname' },
          { data: 'id' }
        ]
      }

    });
  });
  </script>

Here's the ajax result set (as shown in the console):

[{"Action":"<img src=\"\/images\/edit-32.png\" style=\"cursor:hand\">","cname":"Secretary","id":"7450c99f-751e-11ef-9c27-3822e2293b8c"}]

I am loading my libraries as follows:

     <!-- jQery -->
     <script type="text/javascript" src="/js/jquery.js"></script>
     <script type="text/javascript" src="https://cdn.datatables.net/2.1.6/js/dataTables.min.js"></script>
     <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>

     <!-- popper js -->
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

     <!-- bootstrap js -->
     <script type="text/javascript" src="/js/bootstrap.js"></script>

All I am getting in the table (which looks like a data table) is: Loading...

Looking at the console, I am getting this error:

Uncaught TypeError: e is undefined (that is happening in dataTables.min.js:4;34731

I am getting an error before it from h1-check.js but I have no idea what the heck that is.

Can anyone decipher this? I am at a dead stop.

kthorngren

looks like two issues:

1. The columns option is inside the ajax option.
2. The row data is not in the default data object as described in the ajax docs. Use ajax.dataSrc to point to the row data.

I think the config should look more like this:

  $("#tblList").DataTable({
    ajax: {
      url: "/stafftypes/ajaxLoadData",
      type: "post",
      dataSrc; ""
    },
    columns: [
      { data: 'Action' },
      { data: 'cname' },
      { data: 'id' }
    ]
  });

Kevin

bazianm

OK. Here's what I have so far. I am still not there.

I changed the JSON response. It looks like this, now:

{"data":"[{\"Action\":\"<img src=\\\"\\\/images\\\/edit-32.png\\\" style=\\\"cursor:hand\\\">\",\"cname\":\"Secretary\",\"id\":\"7450c99f-751e-11ef-9c27-3822e2293b8c\"}]"}

Here's my DataTables declaration right now:

  <script>
  $(document).ready(function() {
    $("#tblList").DataTable({
      ajax: {
        url: "/stafftypes/ajaxLoadData",
        type: "post",
        dataType: "json",
        success: function(d,t,x) {
                var RetData;
                RetData = JSON.stringify(d);
                return RetData;
        }
      },
      columns: [
        { data: 'Action' },
        { data: 'cname' },
        { data: 'id' }
      ],
    });
  });
  </script>

It still isn't populating...

allan

Per the ajax documentation, don't supply your own success function.

Instead, use ajax.dataSrc as Kevin indicated. One of the issues you'll face though is that your server is returning data as a string, not an array, so do:

dataSrc: function (d) {
  return JSON.parse(d.data);
}

Allan

bazianm

Thanks. I did that. Now it is parsing the data into 160 rows of gibberish. Not even sure how to debug this one...

kthorngren

Is the JSON response you posted capture from the browser's network inspect tool?

Typically when you see escaped " with the preceding backslash, ie \"Action\", the server has encapsulated the response into JSON more than once. I would first look at the server script to make sure the response is JSON encapsulated once. Then you won't need the ajax.dataSrc that Allan posted.

The next step I would use is to set a browser breakpoint on the return statement in Allan's ajax.dataSrc and examine d to see why JSON.parse(d.data) doesn't seem to work. From what you posted d.data is "[{....}]". Note the " around the array []. This means its a string and JSON.parse(d.data) should work.

Kevin

kthorngren

This test case will illustrate what Allan showed you with using JSON.parse(d.data) with your JSON response.
https://live.datatables.net/gisepezo/1/edit

Open the browser's console to see the results. Note the last output is an array object which Datatables can use to populate the table.

Kevin

allan

If you can't get it working, link to a page showing the problem so we can help diagnose and resolve the issue.

Allan