Versions Compared

Key

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

...

Code Block
languagejs
titleJavascript
linenumberstrue
<script>
$(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
        th1.detach().insertAfter(th2);
    });

    // 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
        td1.detach().insertAfter(td2);
    });
});
</script>

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


 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

...