3 multi-select tables

sbecker11

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?

allan

Hi,

Also need to alter row column data and its buttons when moved from one table to another.

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

sbecker11

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".

allan

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 then row().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

sbecker11

You sir, are a life saver. Thank you!!

sbecker11

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:

lengthChange: true,
lengthMenu: [10, 25, 100, 500],

suggestions?

allan

I removed the l option from the dom parameter. Updated example with it back in.

Regards,
Allan

sbecker11

Thanks