reload datatable without ajax with code examples

As a web developer, you may often come across a situation where you need to refresh data in a DataTable without using AJAX. The DataTable is one of the most widely used and powerful JavaScript libraries to present data in a tabular format. It has a rich set of features like sorting, filtering, pagination, and more.

Reloading data in a DataTable without AJAX means the data is retrieved and updated on the client-side without needing to make an HTTP request to the server. This approach can help reduce server load and can improve performance when dealing with static data or when high-frequency AJAX requests are not feasible.

In this article, we will explore how to reload data in a DataTable without AJAX with code examples.

Step 1: Create a DataTable

To begin with, let's create a simple DataTable that displays some sample data. For this tutorial, we will use the DataTables.net library. You can include the library by downloading it from their website or by adding the following script tags to your HTML file:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

Now, let's create a simple DataTable by adding the following code to our HTML file:

<table id="example" class="display" style="width:100%">
  <thead>
      <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Country</th>
          <th>City</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>John Doe</td>
          <td>32</td>
          <td>Male</td>
          <td>USA</td>
          <td>New York</td>
      </tr>
      <tr>
          <td>Jane Doe</td>
          <td>28</td>
          <td>Female</td>
          <td>Canada</td>
          <td>Toronto</td>
      </tr>
      <tr>
          <td>Mark Smith</td>
          <td>45</td>
          <td>Male</td>
          <td>UK</td>
          <td>London</td>
      </tr>
      <tr>
          <td>Kelly Brown</td>
          <td>22</td>
          <td>Female</td>
          <td>Australia</td>
          <td>Sydney</td>
      </tr>
  </tbody>
</table>

Step 2: Add a Reload Button

Next, let's add a reload button to our page so that we can refresh the data in our DataTable. Add the following HTML code to your file:

<button id="reloadButton">Reload Data</button>

Now, we need to add an event listener to this button so that when it's clicked, it triggers the reload function. Let's add the following code to our JavaScript file:

$(document).ready(function() {

  $('#reloadButton').click(function() {
    reloadDataTable();
  });

});

In the above code, we've attached an event listener to the button using jQuery's click function. When the button is clicked, it triggers the reloadDataTable function.

Step 3: Define reloadDataTable Function

Now, we need to define the reloadDataTable function. This function will update the data in our DataTable without using AJAX. Instead, it will simply redraw the table with the updated data.

Here's the code for our reloadDataTable function:

function reloadDataTable() {

  var table = $('#example').DataTable();
  table.clear().destroy();

  $('#example').DataTable({
    data: [
      ['Tom Smith', 28, 'Male', 'USA', 'Los Angeles'],
      ['Jenny Wilson', 35, 'Female', 'Canada', 'Vancouver'],
      ['David Lee', 42, 'Male', 'Korea', 'Seoul'],
      ['Kim Ortiz', 26, 'Female', 'Mexico', 'Cancun']
    ],
    columns: [
      { title: "Name" },
      { title: "Age" },
      { title: "Gender" },
      { title: "Country" },
      { title: "City" }
    ]
  });

}

In the above code, we first retrieve the existing DataTable using jQuery's $().DataTable() function, and then we clear and destroy it using the clear() and destroy() methods. This is necessary to remove any existing table data and settings before we redraw the table with the updated data.

Next, we create a new DataTable using the updated data and settings. In this example, we're using a simple array of arrays to define our data. We're also defining our columns using an array of objects, where each object specifies the title of the column.

Finally, we call the DataTable() function on our table element and pass it the updated data and settings.

Step 4: Testing

Now, let's test our code. Open your HTML file and press the reload button. You should see that the data in your DataTable is updated with the new data we defined in the reloadDataTable function.

Conclusion

In this article, we learned how to reload data in a DataTable without using AJAX with code examples. We created a simple DataTable and a reload button, and then defined a function that updates the data in the table without needing to make an AJAX request. This approach can help reduce server load and can improve performance when dealing with static data or when high-frequency AJAX requests are not feasible.

Remember to always test your code thoroughly before deploying it to production. Happy coding!

I'm sorry, but I would need you to provide me with more information or context about which previous topics you want me to write more about. Please let me know and I'll be happy to assist you further.

reload datatable without ajax with code examples

Popular questions

Tag

Deeksha Dev

Leave a Reply Cancel reply

Popular questions

Tag

Deeksha Dev

Leave a Reply Cancel reply

Related Posts