Make the user able to select/unselect certain, or all, datatable's rows and make an action on them (such as deleting).
The following modification should be made:
- each row will be uniquely identified by an id, either string or numeric, that will be used as action's parameter.
- each row will have, as first cell, a checkbox that selects/unselects ONLY the entry represented by that row.
- header row will have, as first cell, a checkbox that selects/unselects ALL entries.
- if at least one entry is selected, an "action panel" should appear on top of the table, showing designed "group actions"
Group actions should be defined in component's markup, that would be modified, as following;
<div data-replace="jtable">
<div data-table-actions>
<div data-action-name="delete" data-action-href="/action/{id}">
<!-- action button or link -->
</div>
<div data-action-name="delete with js" data-action-href="javascript:action('{id}')">
<!-- action button or link -->
</div>
</div>
<table>
<!-- table headers -->
<tbody>
<tr data-id="20">
<!-- entry's cells -->
</tr>
</tbody>
</table>
</div>
The placeholder {id} have to be written as it is, it will be replaced by entry's id, as specified in the data-id attribute.
The cells with checkboxes will be generated by Javascript.
Make the user able to select/unselect certain, or all, datatable's rows and make an action on them (such as deleting).
The following modification should be made:
Group actions should be defined in component's markup, that would be modified, as following;
The placeholder
{id}have to be written as it is, it will be replaced by entry's id, as specified in thedata-idattribute.The cells with checkboxes will be generated by Javascript.