HTML 5 data-sort does not work
HTML 5 data-sort does not work
seth9009
Posts: 48Questions: 9Answers: 2
I'm trying to use HTML5 data-sort attribute on a table that's rendered from PHP, after hours of debugging i've found the culprit it's the "columns: {}" option i have on my datatables instance, however i need that for my inline editor, my code looks something like this
`
$(document).ready(function() {
var dtable = $('.data.table').DataTable({
columns: <?php echo $tableColumns; ?>,
columnDefs: [
{targets: 'no-sort', orderable: false}
],
order: [],
responsive: true,
keys: {
columns: ':not(.no-inline-edit)',
editor: editor,
keys: [ 9 ]
}
});
var editor = new $.fn.dataTable.Editor({
ajax: function(method, url, data, onSuccess, onError) {
var formData = {};
formData['inlineAjax'] = 1;
formData['tableName'] = '<?php echo htmlencode($tableName) ?>';
$.each(data['data'], function(index, value) {
formData['recordNum'] = index;
$.each(value, function(i, v) {
formData['fieldName'] = i;
formData['value'] = v;
});
});
var edfields = <?php echo $editorColumns; ?>;
var edrow = {};
$.each($("tr#"+formData['recordNum']+" td"), function(index, value) {
edrow[edfields[index]['name']] = $(value).html();
});
formData['row'] = edrow;
$.ajax({
'type': 'POST',
'url': "<?php echo $_SERVER['REQUEST_URI']; ?>",
'data': formData,
'dataType': 'json',
'cache': false,
success: function(json) {
onSuccess(json);
},
error: function (xhr, error, thrown) {
onError(xhr, error, thrown);
}
});
},
table: '.data.table',
fields: <?php echo $editorColumns; ?>,
formOptions: {
inline: {
onBlur: 'submit'
}
}
});
dtable.on('key-focus', function(e, datatable, cell) {
$(document).on('focus', '.data.table > tbody > tr > td.focus', function(e) {
var cellVal = $('.data.table .focus').data('value');
$('.data.table .focus').find('input').val(cellVal);
});
if($(datatable.cell(cell.index()).nodes()).data('inlinetype') == "bubble") {
editor.bubble(cell.index());
} else {
editor.inline(cell.index());
}
});
`
if i comment the "columns:{}" in my datatables instance then the sort works fine, but the inline editor does not work anymore, is there way to make it work ?
Thanks,
Claudiu
This discussion has been closed.
Replies
What does
<?php echo $tableColumns; ?>,resolve to?Allan
something like this
columns: [{"data":"checkbox"},{"data":"dragSortOrder"},{"data":"createdDate"},{"data":"date"},{"data":"title"},{"data":"textbox"},{"data":"textfield"},{"data":"list"},{"data":"category"},{"data":"relatedRecords001"},{"data":"action"}],
basically the name of each column
Thanks,
Claudiu
That's the issue. It looks like you are DOM sourcing the data, but using the
columns.dataproperty to read the cell data into object properties - is that correct? Or are you loading the data from somewhere else?The issue with DOM sourcing the data like that is DataTables will not attempt to auto detect the HTML5 parameters, since the data source has already been defined.
If you remove those options, does it pick up the sorting information correctly?
Allan
No, the table is generated from PHP, i'm not loading the date via ajax or something else, and for datatables yes i don't need the columns option, but i do need it for my inline editing to work, if i remove it my inline edit stops working and my "data-sort" starts working fine .. hope it makes sense.
Thanks,
Claudiu
Super - thanks for the extra information. What to do here is to let DataTables read the information in as an array (i.e. don't specify the
columns.dataproperty, and use thefields.datato point at the array index you want to use for that's field's data (based on the column index).The other option is to use the
columns.dataoption in one of its more complex forms to have it read in both the information from the cell and the attribute, which you can do like this: http://live.datatables.net/xifuxiga/1/edit .Overall, I suspect it would actually be easier if you were to Ajax load the data.
Allan
Thank you Allan, unfortunately i can't load the data trough ajax as i've integrated this into a bigger system that has it's ways set in stone to say like that
for the moment i've achieved the sort trough a hack basically i've added something like <span style="display:none">timestamp</span> and it works fine however i don't like the hackish style of it
so i'll try your second suggestion _: and sort: in data object as it is much cleaner.
Thank you again for your help!
Kind regards,
Claudiu
yep this one definitely worked
columns: [{"data":"checkbox"},{"data":"dragSortOrder"},{"data":{"":"createdDate.display","sort":"createdDate.@data-sort"}},{"data":{"":"date.display","sort":"date.@data-sort"}},{"data":"title"},{"data":"textbox"},{"data":"textfield"},{"data":"list"},{"data":"category"},{"data":"relatedRecords001"},{"data":"action"}],
along with data-sort as HTML5 attribute.
Thanks!
Kind regards,
Claudiu
Super - thanks for posting back! Good to hear you've got it working.
Allan
Don't know where else this is specifically documented, but gleaning what I needed from this discussion I did the following in my HTML tables to specify sorting using the data-sort attribute: