EN VI

Javascript - Data table refresh and pagination?

How to Javascript - Data table refresh and pagination

i'm working on a simple crud data table, i add refresh function without reloading the page using ajax to append html. it works fine, then there's conflict when i add pagination from laravel. the table only shows the first 5 data from fetched data on the next page.

$(document).ready(function() {
  // Function to refresh table data
  function refreshTable(page) {
      $.ajax({
          url: '/get-latest-projects?page=' + page, // URL to fetch updated data
          method: 'GET',
          success: function(response) {
              // Update table with new data
              $('#dataTable tbody').html(' '); // Assuming data is HTML for the table body only

              $.each(response.data, function(index, item) {
                var row = '<tr class="tr">';
                row += '<td>' + item.input_date + '</td>';
                row += '<td>' + item.nama_project + '</td>';
                row += '<td class="desc">' + item.requestor + '</td>';
                row += '<td>' + item.category_project + '</td>';
                row += '<td><span>' + item.description_project + '</span></td>';
                row += '<td>' + item.status + '</td>';
                row += '<td><span class="status--process">' + item.pic_project + '</span></td>';
                row += '<td>' + item.eta_project + '</td>';
                row += '<td><div class="table-data-feature" id="editContainer">';
                row += '<button type="button" class="item" data-toggle="modal" data-target="#editModal' + item.id + '" data-placement="top" title="Edit"><i class="zmdi zmdi-edit"></i></button>';
                row += '<button class="item" data-toggle="tooltip" data-placement="top" title="Delete"><i class="zmdi zmdi-delete"></i></button>';
                row += '</div></td></tr>';
                $('#dataTable tbody').append(row);
            });
          },
          error: function(xhr, status, error) {
              console.error('Error refreshing table:', error);
          }
      });
  }

  refreshTable(1);

  // Reload table when the button is clicked
  $('#reloadButton').click(function() {
      refreshTable(1);
  });
});

the table is able to show the next data on next page only for a blink then covered by appended html which containing new data fetched

    public function index()
    {
        $projects = Project::orderBy('id', 'desc')->paginate(5);
        return view('table', compact('projects'));

    }


    
    public function getLatestProjects()
    {
        $projects = Project::orderBy('id', 'desc')->latest()->paginate(5); // Adjust as needed
        return response()->json($projects);
    }

this is another try from before which the object wasn't defined.

Solution:

The issue you're encountering seems to be related to how you handle the pagination of your table data and the refreshing of the table content using AJAX. It appears that when you refresh the table with new data, the pagination mechanism provided by Laravel's pagination interferes with the manual update.

To resolve this issue, you can adjust your approach to handle the pagination properly in your AJAX request. Here's how you can do it:

Modify your JavaScript code to include the page number in the AJAX request:

$(document).ready(function() {
  // Function to refresh table data
  function refreshTable(page) {
      $.ajax({
          url: '/get-latest-projects?page=' + page, // Include the page number in the URL
          method: 'GET',
          success: function(response) {
              // Update table with new data
              $('#dataTable tbody').html(' '); // Assuming data is HTML for the table body only

              $.each(response.data, function(index, item) {
                  // Append new rows to the table
              });

              // Update pagination links if needed
              $('#pagination').html(response.links); // Update pagination links
          },
          error: function(xhr, status, error) {
              console.error('Error refreshing table:', error);
          }
      });
  }

  refreshTable(1);

  // Reload table when the button is clicked
  $('#reloadButton').click(function() {
      refreshTable(1);
  });

  // Handle pagination clicks
  $(document).on('click', '.pagination a', function(event) {
      event.preventDefault();
      var page = $(this).attr('href').split('page=')[1]; // Get page number from URL
      refreshTable(page);
  });
});

In your Laravel controller, return both the data and the pagination links in the JSON response:

public function getLatestProjects()
{
    $projects = Project::orderBy('id', 'desc')->latest()->paginate(5); // Adjust as needed
    return response()->json([
        'data' => $projects->items(), // Get the data items
        'links' => $projects->links()->toHtml(), // Get pagination links as HTML
    ]);
}