I show some data from the DB on a table ordered by a column in the DB called order
:
<tbody>
<tr id="1" data-order="1">
<td>1</td> <!-- id from DB -->
<td>Test</td>
<td>1</td> <!-- order from DB -->
<td>
<a>Edit</a>
<a>Delete</a>
</td>
</tr>
..
</tbody>
I use jquery-uri
for drag and drop http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
JS code:
jQuery("table tbody").sortable({
update: function (event, ui) {
UpdateOrder();
}
});
function UpdateOrder() {
jQuery("table tbody tr").each(function () {
//Do something.
}
}
It's working and I can drag and drop the elements, But how to save the new order of elements?
Like the WordPress menus drag and drop feature, Where you could organize the pages in the menu using drag-drop.
I could create a form beneath the table:
<form method="POST">
<input type="submit" name="update_order" value="Save" >
</form>
Then check if that form is submitted:
if( isset($_POST['update_order']) ){
global $wpdb;
$wpdb->update('data', array("order" => ) , array('id' => ));
}
But how to gather all the elements order
and id
s to update them?
How to do that?