I try to use Handsontable plugin and want to sort data on table by using ajax .
When I use columnSorting: true
, there only sorting on view and I update it goes wrong index row.
Anyone has idea how to sort data from php and then show data result after sort on table?
$container.handsontable({
colHeaders: header(),//["Title", "Description", "Comments"],
data : data(),
//startRows: 3,
columnSorting: true,
startCols: 20,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
copyRowsLimit: 100000,
beforeChange: function (change, source) {
if (source === 'loadData') {
return; //don't save this change
}
if ($('input[name=autosave]').is(':checked')) {
$("#dataconsole").html("<p>Please wait ...</p>").hide().fadeIn("slow");
clearTimeout(autosaveNotification);
$.ajax({
url: "../php/save_auto.php?cmid=<?php echo $com_id;?>",
type: "POST",
data: {"changes": change}, //contains changed cells' data
success: function (data) {
$("#dataconsole").text('Autosaved (' + change.length + ' cell' + (change.length > 1 ? 's' : '') + ')');
if(source !== 'program'){
// reset current cell
$( "td:contains('=')").text(data);
}
}//complete
});
}//checked
}//change
});
What you could do is disable the sorting plugin and on click of the header, send a request to your backend with the data and the sorting parameter. Do whatever sorting you want in there, then return the new data
object and updateSettings
on your hotInstance
like so:
hotInstance.updateSettings({
data: newData
})
And with this you should be set to go.