如何用JavaScript在客户端对Laravel渲染的表格按签发日期排序

No problem at all—let's get this client-side sorting working for your Issue Date column. Below is a vanilla JavaScript solution that's lightweight and easy to integrate with your existing Laravel-generated table.

First, let's tweak your table's header to make the Issue Date column clickable (we'll add a visual indicator too so users know it's sortable):

<table class="table" id="prTable">
  <thead>
    <tr>
      <th>No</th>
      <th>PR ID</th>
      <th>PR Type</th>
      <!-- Add onclick handler and sort indicator -->
      <th onclick="sortTableByDate(3)">Issue Date <span style="font-size: 0.8em;">↑↓</span></th>
      <th>End Date</th>
    </tr>
  </thead>
  <tbody>
    <?php $j=1; ?>
    <!-- Your existing Laravel loop here, e.g.:
    @foreach($prs as $pr)
    <tr>
      <td>{{ $j++ }}</td>
      <td>{{ $pr->pr_id }}</td>
      <td>{{ $pr->pr_type }}</td>
      <td>{{ $pr->issue_date }}</td> <!-- Make sure this date is in a parseable format like Y-m-d or Y-m-d H:i:s -->
      <td>{{ $pr->end_date }}</td>
    </tr>
    @endforeach
    -->
  </tbody>
</table>

Next, add this JavaScript to your page (either in a <script> tag at the bottom of your blade template or in an external JS file):

// Track current sort direction for Issue Date (true = ascending, false = descending)
let isAscending = true;

function sortTableByDate(columnIndex) {
  const table = document.getElementById('prTable');
  const tbody = table.querySelector('tbody');
  // Convert table rows to an array so we can sort them
  const rowsArray = Array.from(tbody.querySelectorAll('tr'));

  // Sort the rows based on the date in the target column
  rowsArray.sort((rowA, rowB) => {
    // Get the date text from each row's target column
    const dateTextA = rowA.cells[columnIndex].textContent.trim();
    const dateTextB = rowB.cells[columnIndex].textContent.trim();
    
    // Convert text to Date objects for accurate comparison
    const dateA = new Date(dateTextA);
    const dateB = new Date(dateTextB);

    // Compare dates: adjust based on sort direction
    if (isAscending) {
      return dateA - dateB;
    } else {
      return dateB - dateA;
    }
  });

  // Clear the existing tbody and append the sorted rows
  tbody.innerHTML = '';
  rowsArray.forEach(row => tbody.appendChild(row));

  // Toggle the sort direction for next click
  isAscending = !isAscending;
}

Key Notes: #

• Date Format: Make sure your issue_date is rendered in a format that JavaScript's Date constructor can parse (like YYYY-MM-DD or YYYY-MM-DD HH:MM:SS). Laravel's Carbon can handle this easily with {{ $pr->issue_date->format('Y-m-d') }} if you're using Carbon for dates.
• Sort Direction: The isAscending variable tracks whether we're sorting up or down—each click toggles this.
• Vanilla JS: No jQuery or other libraries required, so this won't add extra bloat to your page.
• Reusability: You can adapt this function for other date columns (like End Date) by changing the column index passed to sortTableByDate().

If you want to add a visual cue for the current sort direction (e.g., show only ↑ or ↓ instead of both), you can modify the <span> in the header inside the sortTableByDate function to update based on isAscending.

内容的提问来源于stack exchange，提问作者Mushfiqur Mashuk