Скачать или смотреть Resolving the No data available in table Issue with jQuery DataTables

A step-by-step guide to addressing the `No data available in table` error in jQuery DataTables when retrieving data from a REST API.
---
This video is based on the question https://stackoverflow.com/q/65683972/ asked by the user 'Zain Nabi' ( https://stackoverflow.com/u/13952387/ ) and on the answer https://stackoverflow.com/a/65685408/ provided by the user 'andrewJames' ( https://stackoverflow.com/u/12567365/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Jquery Data Table - No data available in table

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction

If you've ever encountered the message 'No data available in table' when implementing jQuery DataTables in your application, you know how frustrating it can be. This error typically arises when your DataTable fails to populate because it cannot find the data provided by your API. In this guide, we'll explore a common scenario that leads to this issue and how to effectively resolve it.

Understanding the Problem

In many applications, especially those built with .NET Core, data is often retrieved through a REST API in JSON format. When you set up a jQuery DataTable to pull this data, it requires precise mapping to correctly populate the table's rows and columns. If the DataTables cannot locate the necessary data, it displays the unwelcome message indicating that no data is available.

Example Scenario

Imagine you are working on a web application where user data is fetched from an API and displayed in a table. After setting everything up, running the application reveals the following message:

[[See Video to Reveal this Text or Code Snippet]]

Inspecting the Data Structure

Upon closer inspection of the JSON response from your API, the data returned may look something like this:

[[See Video to Reveal this Text or Code Snippet]]

Here, you can observe the following:

The data you need for the DataTable resides within the data.result array.

Each {...} inside the array represents a row to be displayed in your table.

Solution

To resolve the issue of the DataTable displaying no data, you need to adjust the way your DataTable retrieves these values from the JSON response. Here's how to do it:

Step 1: Modify the Data Source

When defining your DataTable, you’d originally have something like this:

[[See Video to Reveal this Text or Code Snippet]]

However, this was incorrect because it points to the entire response, and not specifically to the array containing your data.

Step 2: Update the Data Property

To correctly direct DataTables to the data it needs, you'll want to change the property to specifically reference the result array within the data object. Update your code to the following:

[[See Video to Reveal this Text or Code Snippet]]

Complete DataTable Initialization

Below is how your DataTable initialization should look after making the required changes:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By simply redirecting the DataTable to the correct path in your JSON response, you can eliminate the No data available in table error, allowing your application to display the relevant user data seamlessly. Remember, verifying the structure of your JSON response is crucial for successful data mapping with DataTables.

With these tweaks, your DataTable should be fully operational and ready to showcase your data efficiently!