datatable ajax return custom data value

How to Get Custom Data Value from Datatable Ajax Return#

Working with Datatable is a common task when dealing with tabular data. Often times, we need to fetch custom data values from the server and display them in the table. In this scenario, we can use the ajax option of Datatable to fetch data from the server and customize it to display in the table.

Let's say we have a table that displays user information like name, email, and age. We want to display the user's avatar in the table as well. To do this, we can add a custom data attribute to the HTML element that represents the user's avatar and fetch it from the server using ajax.

Step 1: Add Custom Data Attribute#

We need to add a custom data attribute to the HTML element that represents the user's avatar. This can be done using the data- prefix followed by the name of the attribute. For example, we can add a data-avatar attribute to the <img> element that represents the user's avatar.

<table id="user-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Age</th>
      <th>Avatar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td>30</td>
      <td><img src="avatar.jpg" data-avatar="1"></td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>jane.doe@example.com</td>
      <td>25</td>
      <td><img src="avatar.jpg" data-avatar="2"></td>
    </tr>
  </tbody>
</table>

Step 2: Fetch Custom Data Value from Server#

We need to fetch the custom data value from the server using ajax. We can do this by specifying a dataSrc function in the ajax option of Datatable. This function takes the JSON response from the server as a parameter and returns the data that should be displayed in the table.

In our example, we can fetch the avatar URL for each user using AJAX and add it to the JSON response from the server. We can then return this updated JSON response from the dataSrc function.

$(document).ready(function() {
  $('#user-table').DataTable({
    ajax: {
      url: 'fetch-users.php',
      dataSrc: function(response) {
        var data = response.data;

        // Fetch custom data value for each user
        data.forEach(function(user) {
          var avatarId = user[3]; // Index of avatar column
          var avatarUrl = fetchAvatar(avatarId); // Fetch avatar URL using AJAX
          user[3] = '<img src="' + avatarUrl + '">'; // Update avatar column with image element
        });

        // Return updated JSON response
        return data;
      }
    }
  });
});

function fetchAvatar(avatarId) {
  // Fetch avatar URL using AJAX
}

In the above code, we are using the forEach method to loop through each user in the JSON response and fetch the avatar URL using AJAX. We then update the avatar column with an <img> element that has the fetched URL as its source.

Step 3: Display Custom Data Value in Table#

After fetching the custom data value from the server, we need to display it in the table. We can do this by using the columns option of Datatable to specify how each column should be displayed.

$(document).ready(function() {
  $('#user-table').DataTable({
    ajax: {
      url: 'fetch-users.php',
      dataSrc: function(response) {
        var data = response.data;

        // Fetch custom data value for each user
        data.forEach(function(user) {
          var avatarId = user[3]; // Index of avatar column
          var avatarUrl = fetchAvatar(avatarId); // Fetch avatar URL using AJAX
          user[3] = '<img src="' + avatarUrl + '">'; // Update avatar column with image element
        });

        // Return updated JSON response
        return data;
      }
    },
    columns: [
      {data: 'name'},
      {data: 'email'},
      {data: 'age'},
      {data: 'avatar'}
    ]
  });
});

In the above code, we are using the columns option to specify how each column should be displayed. We are mapping the 'name', 'email', and 'age' fields from the JSON response to their respective columns in the table. We are also mapping the 'avatar' field to the custom data attribute we added to the <img> element in Step 1.

That's it! With these three steps, we can fetch and display custom data values in a Datatable using AJAX.