Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  September 18

  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 Posts: 10Questions: 5Answers: 0

  September 18

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 18

  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 Posts: 10Questions: 5Answers: 0

  September 18

  Thanks. I did that. Now it is parsing the data into 160 rows of gibberish. Not even sure how to debug this one...
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  September 18

  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 Posts: 21,336Questions: 26Answers: 4,951

  September 18 edited September 18

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 19

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

  Allan
• bazianm Posts: 10Questions: 5Answers: 0

  September 22

  I got it working. Thanks. In my attempts to get the stuff working (and my brain remembering how I had always gotten it to work in the past), I messed up in the my php code when generating the JSON.

  Thank you all for your help