数据表刷新和分页

Question

我正在研究一个简单的增删改查数据表，我添加了刷新功能，而无需使用ajax附加html来重新加载页面。它工作正常，然后当我从 laravel 添加分页时会出现冲突。该表仅显示下一页获取数据的前 5 条数据。

$(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);
  });
});

表格能够在下一页上显示下一个数据，仅眨眼，然后由包含获取的新数据的附加 html 覆盖

    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);
    }

这是之前未定义对象的另一次尝试。

Answer 1

您遇到的问题似乎与您如何处理表数据的分页以及使用 AJAX 刷新表内容有关。看来当你用新数据刷新表时，Laravel 分页提供的分页机制会干扰手动更新。

要解决此问题，您可以调整方法以在 AJAX 请求中正确处理分页。具体方法如下：

修改您的 JavaScript 代码以在 AJAX 请求中包含页码：

$(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);
  });
});

在 Laravel 控制器中，在 JSON 响应中返回数据和分页链接：

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
    ]);
}