HTML 5 data-sort does not work

seth9009

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

allan

What does <?php echo $tableColumns; ?>, resolve to?

Allan

seth9009

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

allan

That's the issue. It looks like you are DOM sourcing the data, but using the columns.data property 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

seth9009

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

allan

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.data property, and use the fields.data to 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.data option 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

seth9009

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

seth9009

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

allan

Super - thanks for posting back! Good to hear you've got it working.

Allan

tom_supergan

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:

        <th data-type="@data-sort">Column Heading</th>