Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


Code Block
$(document).ready(function() {
    // Reorder the header row
    $('#list_form thead tr').each(function() {
        // Get the current header row
        var tr = $(this);
        // Select the 5th header cell (index 4)
        var th1 = tr.find('th:eq(4)');
        // Select the 1st header cell (index 0)
        var th2 = tr.find('th:eq(0)');
        // Move the 5th header cell after the 1st header cell

    // Reorder the body rows
    $('#list_form tbody tr').each(function() {
        // Get the current body row
        var tr = $(this);
        // Select the 5th cell in the row (index 4)
        var td1 = tr.find('td:eq(4)');
        // Select the 1st cell in the row (index 0)
        var td2 = tr.find('td:eq(0)');
        // Move the 5th cell after the 1st cell

/* Add content "Action" after the elements with class row_action in the header */
th.row_action:after {
    content: "Action";

 Be Be sure to use the correct correct List ID in line 4 and line 16. Once you have configured it correctly, this is what the list should look like.:

Figure 1: Datalist before implementation