Introduction

In this article, we will demonstrate how to move the action column of a list through the use of Javascript. 

Implementation

To implement this, go to CRUD Properties > UI (List) > Custom Footer then input this code:

Javascript
<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 sure to use the 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


Figure 2: Datalist after implementation


Do note how the action column has been shifted to the left. We have also added a column name above the button. Feel free to explore the app further in the sample app below.


Download Sample App:

  • No labels