Refreshing and paginating data tables

Question

Refreshing and paginating data tables

I'm currently working on a basic CRUD data table and I have added a refresh function using AJAX to dynamically append HTML without reloading the page. Everything was working fine until I introduced pagination from Laravel. The issue now is that only the first 5 data entries are displayed on each subsequent 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 in HTML format 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 briefly displays the next page's data before being overwritten by newly fetched data from the appended HTML content.

    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 attempt aims to address the issue of an undefined object experienced previously.

javascript json ajax laravel

Answer 1

Answer №1

It seems that the issue you are facing is related to how the pagination of your table data is being handled along with the use of AJAX to refresh the table content. The problem arises when refreshing the table with new data, as Laravel's pagination system may conflict with the manual update process.

To resolve this issue, it is important to adjust your approach in handling pagination properly within your AJAX requests. Here are some steps you can take:

Make changes to your JavaScript code to ensure the page number is included in the AJAX request:

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

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

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

  refreshTable(1);

  // Reload the 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]; // Extract page number from the URL
      refreshTable(page);
  });
});

Furthermore, in your Laravel controller, ensure that both the data and pagination links are returned in the JSON response:

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

Answer 2

It seems that the issue you are facing is related to how the pagination of your table data is being handled along with the use of AJAX to refresh the table content. The problem arises when refreshing the table with new data, as Laravel's pagination system may conflict with the manual update process.

To resolve this issue, it is important to adjust your approach in handling pagination properly within your AJAX requests. Here are some steps you can take:

Make changes to your JavaScript code to ensure the page number is included in the AJAX request:

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

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

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

  refreshTable(1);

  // Reload the 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]; // Extract page number from the URL
      refreshTable(page);
  });
});

Furthermore, in your Laravel controller, ensure that both the data and pagination links are returned in the JSON response:

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

Refreshing and paginating data tables

Answer №1

Similar questions

Trouble fetching data for my controller in AngularJS using UI Router resolve

The 'admin' attribute is not found in the 'Object' data type

Eliminate the hover effect from every element

What is preventing PHP from accessing the $_SESSION[] array?

What is the method for exporting data directly from an EC2 instance to a file, such as a .txt or .json file?

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

How can I prevent users from inputting negative numbers in a cellEditable material-table?

The importance of manually loading extensions and utilizing Ajax effectively for renderPartial

How can I link the function name stored in JSON data to the (click) event of a button in an Angular project?

I am experiencing difficulty in successfully transmitting a variable from my jQuery code to my PHP code

What is the most effective approach for managing nested callbacks in Node.js/Expressjs?

Unique: "Best Practices for Setting Angular.js Controller Data Directly in the Code"

Using AJAX to send an array as a response from Laravel

"Transforming the Website Background with a Splash of Color

Dealing with the challenge of managing multiple instances in a setup involving Ajax long polling (comet) and PHP on Lighttpd v1

Include a header in the API HTTP call for Angular 2 and Ionic 2

Tips for concealing JavaScript files from the Chrome Developer Tools while using Next.js

What is the best way to create an optional object parameter in Typescript?

Failure of Ajax to populate dropdowns in Internet Explorer

What is the best way to combine several plugins in tinymce?