Inline Move Up/Down

sava

Hi,

I am needing to add options for 'move up' and 'move down', i.e. We have a list of items that have a position associated with them, effectively a priority which is the first column of my table. What I would like to do is when the user selects 'Move Up' alter the position for that record and submit the details without the need for the modal to open.

I have initialised the buttons like so
[code]
{ "mData": null, "sClass": "alignCenter", "sDefaultContent": '', "bSortable": false }
[/code]

Clicking this button will launch the following function which is telling me the row, current position of the current row, position of the previous record. Down function is similar but gets the next record and checks the paging length to stop a record from trying to move down as this is server side.

[code]
// When UP is clicked
$("#pipelineTBL span.userUP").live("click", function (){

// Get the row index for compare, index is zero based.
var rowIndex = oTable.fnGetPosition($(this).closest('tr')[0]);

// Collect position details of; Selected ROW, Previous ROW.
var row = this.parentNode.parentNode;
var currentPos = oTable.fnGetData( $('td:eq(0)', row)[0] );

var nPrev = oTable.fnGetAdjacentTr( row, false );
var prevPos = oTable.fnGetData( $('td:eq(0)', nPrev)[0] );

// Check if the top row has been selected.
if( rowIndex == 0 )
{
// If UP was selected do nothing.
alert('cannot move up');
}
else if((rowIndex + 1) == nPaging) // Determine if last row was selected.
{
alert('can move up');
}
else
{
alert('can move up')
}
});
[/code]

Say there are 3 rows and the position cell for each is in order 1, 2, 3. If I click the UP button on the 2nd row I need the Position value to change to 1 (from 2) and the AJAX call be made to update the records followed by a redraw, so everything that happens nicely now using the modal I would like to happen without needing the modal.

The modal is useful for the additional details but sometimes a simple re-order is all that will be required.

Any guidance would be appreciated.

Thanks.

allan

The way move up / move down can be done in DataTables (and Editor) is to have a hidden column which the order index and force the sorting to always occur on that column ( aaSortingFixed ) . So when you click the button to move a row up, you need to spin through all rows and alter their sorting index appropriately (i.e. increment or decrement by one as needed). This will give you the new ordered and when the table redraws, it will be int he correct order.

Of course this means that there is no user manual sorting, but the two are mutually exclusive anyway, unless you offer some method to switch between user sorting and the ordered sorting.

Allan

philse

if you're interested in using jQueryUI Sortable at all, I achieved this using the following:
[code]
$("#reporttypeTable tbody").sortable({
update: function(e, ui) {
var order = new Array();

$(this).parents('table').find('tr').each(function() {
if (!isNaN($(this).attr('id'))) {
oTable.fnUpdate($(this).index() + 1, oTable.fnGetPosition($(this)[0]), 0, false, false);
order.push($(this).attr('id'));
}
});

oTable.fnDraw();

$.ajax({
type: "POST",
traditional: true,
url: "/Setup/Report-Type/Order",
data: {
order: order
}
});
},
helper: function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
// Set helper cell sizes to match the original sizes
$(this).width($originals.eq(index).width())
});
return $helper;
},
}).disableSelection();
[/code]

It posts back an array of the Id's in order to my Controller that I then iterate over and update the sort column. This allows me to drag/drop my rows to the proper order.

sava

wow I'm lazy, I should have updated this post sooner.
Allan and philse thank you for the input.

Given in our case we don't need at this point to absolutely control the numbering, i.e. if you click up that means you want this item to take the position field value of the one above it (regardless if that is a larger or smaller number) so we don't disable filtering. Or to put it another way the numbers in this instance mean nothing other than ordering data for display, 'this before that', 'that after this', so a number sequence might end up being along the lines of: 1,2,10,15 etc.
It just means things are where we need them with minimal processing.

To that end I found this snippet of code in the docs for editor.

[code]// Automatically submit an edit without showing the user the form
editor.edit( TRnode, null, null, false );
editor.set( 'name', 'Updated name' );
editor.set( 'access', 'Read only' );
editor.submit();[/code]

Using this and what I had previously managed, which was knowing the position I wanted a record to be I could submit that change silently via the form and have our DB procedure work out the rest.

Really happy with the result.


Thanks.