Drag And Drop Rows

macmicro

Hello,
NB The translation is done by Google
I am French and I wanted to share with you my experience in using DataTable

You accept that I put a link to the demo page in image and video?

I use it a lot, but I change a lot too.
I know that many users are looking how to do Drag and Drop table rows.

That, I realized moves the table rows and save the position of the rows in a database

It must first add a new field (listingid) type (int 11) to your end table

Sorry this is not possible to code with the tag

Files appeal
[code]
<link href="css/style.css" rel="stylesheet" type="text/css" /><br>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script><br>
<script type="text/javascript" src="js/jquery.dataTables.js"></script><br>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script><br>
<link href="css/cupertino/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
[/code]
The JavaScript function
[code]

var oTable; $(document).ready(function() { oTable = $('#menuTable').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "oLanguage": { "sUrl": "js/fr_FR.txt" }, "aoColumnDefs": [ { "iDataSort": 4, "aTargets": [ 0 ] } ], }); $(function() { $("#contentLeft tbody").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; $.post("updateDB2.php", order, function(theResponse){ $("#contentRight").html(theResponse); }); } }); }); });

[/code]

Changing Table
Html
[code]
<div id="contentLeft"> <br>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="menuTable" class="display"><br>
<thead><br>
<tr><br>
<th>ID</th><br>
<th>URL</th><br>
<th>Titre</th><br>
<th>Mots</th><br>
<th>Listing</th><br>
</tr><br>
</thead><br>
<tbody><br>
<?php do { ?><br>
<tr id="recordsArray_<?php echo $row_Rsjeu['id']; ?>"><br>
<td><?php echo $row_Rsjeu['id']; ?></td><br>
<td><?php echo $row_Rsjeu['url']; ?></td><br>
<td><?php echo $row_Rsjeu['titre']; ?></td><br>
<td><?php echo $row_Rsjeu['mots']; ?></td><br>
<td><?php echo $row_Rsjeu['listingid']; ?></td><br>
</tr><br>
<?php } while ($row_Rsjeu = mysql_fetch_assoc($Rsjeu)); ?> <br>
</tbody><br>
<tfoot><br>
<tr><br>
<th colspan="5"><br>
<a class="lienui" id="click_me" href="index_moteur4.php">Rafraichir</a><br>
</th><br>
</tr><br>
</tfoot><br>
</table><br>
</div>
[/code]

PHP
[code]

<

div id="contentLeft">
<?php echo '<table width="100%" border="0" cellspacing="0" cellpadding="0" id="menuTable" class="display">'; echo '

'; echo 'IDUrlTitreMotsIdListing'; echo ''; while ($data = mysql_fetch_assoc($req)) { echo ''; echo '' .$data['id']. ''; echo '' .$data['url']. ''; echo '' .$data['titre']. ' '; echo '' .$data['mots'].''; echo '' .$data['listingid'].''; echo ''; } echo ''; echo 'Rafraichir'; echo ''; mysql_free_result($req); mysql_close(); ?>
[/code]
The file updateDB.php
[code]
<?php require("db.php"); $action = mysql_real_escape_string($_POST['action']); $updateRecordsArray = $_POST['recordsArray']; if ($action == "updateRecordsListings"){ $listingCounter = 1; foreach ($updateRecordsArray as $recordIDValue) { $query = "UPDATE name_of_table SET listingid = " . $listingCounter . " WHERE id = " . $recordIDValue; mysql_query($query) or die('Error, insert query failed'); $listingCounter = $listingCounter + 1; } echo '<pre>'; print_r($updateRecordsArray); echo '</pre>'; echo 'Si vous actualisez la page, vous verrez que les documents resteront comme vous les avez modifies.'; } ?>
[/code]

This works very well, and can be top of the table the new row that has just moving by safeguarding their postion in the database
I wanted to share with you my testing and research and share. I know that many users were looking for how, why, I do a lot of research and testing before reaching the now you will like this solution you it I do not know, but for once I post in a forum that is very rare, can be also that this code will be perfect can be, but I wanted to give the tracks. I await your response for the link to the demo page if you will, good dev Macmicro

allan

Hi Macmicro,

Sounds fantastic! Thanks for sharing your code with us, and yes I'd very much like to see it in action. If you could post your link I'll add it to the DataTables news RSS feed.

Regards,
Allan

macmicro

Hello, thank you, I want your consent to the link because it is not to advertise, but share my experiences, here is the link http://macmicro.chez.com/framework/datatable_drag_and_drop.php, this page have plugin translator, there is also the menu on the left another tutorial on editing table cells, here thank you again. Macmicro

allan

Very honest of you :-). Thanks for the link - it looks fantastic! I'll be adding it to the DataTables news feed when I get home this evening.

Regards,
Allan

macmicro

Hello, I love your plugin, it is fantastic, but I just put online a demo real that you can try for yourself, here is the link and good http://macmicro.chez.com/datatable/index.php dev for those who want to implement it in their applications. Macmicro

jocapc

Hi, your code looks great but I think that it should be changed a little bit. It seems to me that when you reorder rows and make any action except the refresh (e.g. change the number of items in the table, type anything in the keyword search, change the page number and return back) the previous order is restored.
Is there any way to update aaData array once ordering is done?

Regards,
Jovan

allan

[quote]jocapc said: Is there any way to update aaData array once ordering is done?[/quote]

No - the ordering done by DataTables is done in the array aiDisplayMaster, which then points to aoData. The order of elements in aoData should never be changed (unless you are being very careful and understand how that would impact DataTables). What is really needed for complete drag and drop support is integration with DataTables' sorting so that can reflect the drag order of the rows.

Allan

ihitro

Thanks, this is the ultimate plugin for datatables

zorgglub

Hi,
I need little help with this fantastic plugin.
I want to insert form in row but the submit button dont works with two onclick element!
thanks
regards

jocapc

Hi,

I have also created one row drag'drop plugin. You might take a look at the http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/index.html.

Jovan