Hopefully there is a cleaner way of achieving what I am trying to do here.
I have a php page that loads a table which is sortable. I want to update my database with the new sort order once the user reorders the rows in a table.
Here is my html:
<table id="table" data-pagination="true" data-reorderable-rows="true" class="table table-bordered table-hover" role="presentation">
<thead>
<tr class="form-field form-required">
<th data-field="id" data-visible="false">Id</th>
<th data-sortable="true">Display Order</th>
<th data-sortable="true">Name</th>
<th data-sortable="true">Age</th>
<th data-sortable="true">Status</th>
</tr>
</thead>
.....
</table>
This is my script that i have inside my php file:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#table').bootstrapTable()
$('#button').click(function () {
alert(JSON.stringify($('#table').bootstrapTable('getData').map(function (row) {
<?php
global $wpdb;
$key = 1;
$wpdb->update("wp_table_name", array("display_order"=>$key), array("id"=> row.id // javascript here ));
$key++;
?>
console.log(row.id);
})));
return "Display order updated!";
})
})
</script>
How can i properly reference 'row.id' in the php code? The row.id has the correct value of the id of the row i want to update in the database. The row also contains all the table rows in the sort order i dragged them to so i know that part is working - it is passing the id from javascript to php is where i am having trouble.