Passing auxiliary data from server to client?

sjordan

In PHP and JS mixed environments, it's pretty common to see server data passed to the client JS view interpolation (see 'some_server_data' below in the first line of the sample below)

Then that value might be used later in Editor.

While this works, it feels messy and I have to assume there's a recommended way to add this auxiliary data to the payload received by DT on load.

What's the recommended API?

<script>

      // some magic computed server data that is not user specific, not computed from user data.
      const some_server_data = <?= $some_server_data ?>

      $(document).ready(function () {
        const editor = new $.fn.dataTable.Editor({
          url: "./data/users.json",
          table: "#attendance",
          fields: [
            {
              label: "First name:",
              name: "users.first_name",
            },
            {
              label: "Last name:",
              name: "users.last_name",
              def: some_server_data
            },
            {
              label: "Phone #:",
              name: "users.phone",
            },
            {
              label: "Site:",
              name: "users.site",
              type: "select",
            },
            {
              label: "Color:",
              name: "users.color",
              type: "select",
            },
          ],
          table: "#users",
        });
         ...

      });
    </script>

kthorngren

One option is to add the auxiliary data to the JSON response from the Datatables ajax request. You can define the fields.def option as a function and in the function use ajax.json() to get the JSON response to fetch the auxiliary data.

Kevin

sjordan

Kevin, if I understand you, this seems a little heavy-handed and results in at least 2 ajax calls.

The first call happens on page load when the data is fetched to populate DT. Then, if I read you correctly, a second call would be made to get the default value of the field in question.

It would seem to me there would be a recommended API to add aux data to the initial load and the developer could use that data as needed.

Some like the following pseudocode:

// Data from initial page load that populates DT
// Inspired from the example (https://datatables.net/examples/ajax/objects.html)

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011-04-25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011-07-25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009-01-12",
      "office": "San Francisco",
      "extn": "1562"
    },
    {
      "id": "4",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012-03-29",
      "office": "Edinburgh",
      "extn": "6224"
    }
  ],
  // this is my pseudocode
  "my_aux_data" {
      "import_global_var": "some global val"
  }
}

Then the question is what is DT's and/or Editor's recommended way to grab my_aux_data.import_global_var while respecting the library's API?

allan

Use xhr. It passes the JSON object that was loaded to the event handler so you can do whever you want with it.

Also there is ajax.json() to get the loaded JSON object, at whatever point you need it in your script.

Allan

kthorngren

if I understand you, this seems a little heavy-handed and results in at least 2 ajax calls.

No just one ajax request. When datatables loads the table data via ajax the server script can add additional data objects to the response. Depeneding on how you want to use the auxiliary data.you can do as Allan suggested and access it in the xhr event. Or you can use ajax.json() to fetch the auxiliary data. This is from the ajax.json() docs:

or obtain data that was also returned in the response but isn't directly used by the DataTable (this is a good technique to use where otherwise multiple Ajax requests would be needed, to help improve performance).

Kevin

kthorngren

For example the JSON response would look something like this:

{
  "data": [...],
  "my_aux_data" {
      "import_global_var": "some global val"
  }
}

Kevin