3 multi-select tables
3 multi-select tables
sbecker11
Posts: 5Questions: 1Answers: 0
I want to create 3 multi-select tables (top, mid, bot) and provide each with buttons to move selected rows up or down and with a callback that describes the rows that are moved
Also need button(s) on each row to move individual row up or down with a callback that describes which row has moved
Also need to alter row column data and its buttons when moved from one table to another.
Can anyone help me with this?
This discussion has been closed.
Answers
Hi,
Could you clarify this for me please? If the data source for the three tables is the same, then its actually relatively straight forward with the API and I can put an example of that together. However, your comment suggests that there might be different data (i.e. columns) in each table - if that is the case, how does the data get made available - it must related to the moved row somehow.
Regards,
Allan
All three tables (table-top,table-mid,table-bot) have their own dataArray (data-top, data-mid and data-bot) and each table has identical columns (column-title, column-status and column-count). column-status has values (status-top, status-mid or status-bot) that defines which table they belong to.
Behavior #1: I would like to be able to take one or more selected rows in one table and move them to another table. For example table-mid has two top-level buttons "move selected up" and "move selected down". table-top has one button "move selected down" and table-bot has one button "move selected up".
Behavior #2: I would like to be able to put button(s) within each row that perform the same action but for the single row. For example each row in table-mid has two buttons "move up" and "move down". Rows in table-top have one button "move down" and rows in table-bot have one button "move up".
Thanks for the clarification.
The key here is to use the
row().data()
method to get the data for a row,row.add()
to add the data to a different table and thenrow().remove()
to remove it from the previous table.Behaviour #1: example. I've used a couple of custom buttons and the Select extension to do this. Note that
rows( {selected: true } )
is used to get the selected rows.Behaviour #2: example. Here I've hijacked the final column for the links. They could easily be shown as icons or whatever else.
The two methods could readily be combined if you require.
Regards,
Allan
You sir, are a life saver. Thank you!!
I have a problem:
Your #2 example shows the lengthMenu (user selects #rows shown)
but your #1 example does not - even if I add the following:
suggestions?
I removed the
l
option from thedom
parameter. Updated example with it back in.Regards,
Allan
Thanks