Table scrolls to top after edit

Loren Maxwell

I am using Scroller and Editor. and particular issue I have is with serverside:true.

When I edit a row, using either inline or the traditional editor, the table redraws and places me back at the top, losing complete sight of the row that was just being worked on.

This is particularly annoying when doing inline editing where I might expect to change several cells on the same row.

This same issue was raised by this post back in July 2016:https://datatables.net/forums/discussion/36382, but there's no solution posted.

Any idea how to prevent the redraw or how to quickly bring the original row back into the scroll window?

allan

Use the drawType option of the form-options. Setting it to none will address that. I'll look into doing something about it out of the box.

Allan

Loren Maxwell

Thanks, @allan.

I was just reading about drawType last night in bed and thought I'd try it this morning.

And yes -- I lay in bed at night and read about DataTables on my phone . . . so what?!? :-)

Anyway, I've tried both none and page but when I used those the inline editing won't work for the text fields, although oddly it will for the checkboxes. Actually if I try any of the four drawTypes I get the same behavior.

Here's my complete code and I can send you some account access information if seeing the actual page would help:

var editor_conference_affiliations;
$(function() {
  editor_conference_affiliations = new $.fn.dataTable.Editor({
    "table": "#conference_affiliations",
    "ajax": {
      "url": "/wiki/extensions/CFBHA/models/mConferenceAffiliations.php",
      "type": "POST",
      "data": {
        "currentUser": "Loren Maxwell"
      }
    },
    "fields": [{
      "name": "season_name",
      "def": null,
      "label": "Season"
    }, {
      "name": "school_code",
      "def": null,
      "label": "Code"
    }, {
      "name": "school_name",
      "def": null,
      "label": "College"
    }, {
      "name": "conference_code",
      "def": null,
      "label": "Conference"
    }, {
      "name": "sub_conference",
      "def": null,
      "label": "Division"
    }, {
      "name": "w",
      "def": null,
      "label": "Win"
    }, {
      "name": "l",
      "def": null,
      "label": "Loss"
    }, {
      "name": "t",
      "def": null,
      "label": "Tie"
    }, {
      "name": "finish",
      "def": null,
      "label": "Finish"
    }, {
      "name": "non_participant",
      "def": null,
      "label": "Non Participant",
      "type": "checkbox",
      "separator": "|",
      "options": [{
        "label": "",
        "value": 1
      }],
      "unselectedValue": 0
    }, {
      "name": "ineligible",
      "def": null,
      "label": "Ineligible",
      "type": "checkbox",
      "separator": "|",
      "options": [{
        "label": "",
        "value": 1
      }],
      "unselectedValue": 0
    }, {
      "name": "remarks",
      "def": null,
      "label": "Notes"
    }],
    "formOptions": {
      "inline": {
        "submit": "allIfChanged"
      }
    }
  }).on('open', function(e, mode, action) {
    if (mode === 'main') {
      conference_affiliations.keys.disable();
    }
  }).on('close', function() {
    conference_affiliations.keys.enable();
  });
  var conference_affiliations = $('#conference_affiliations').DataTable({
    "pageLength": -1,
    "buttons": [{
      "extend": "create",
      "editor": editor_conference_affiliations,
      "text": "<i class=\"fa fa-plus fa-fw\" aria-hidden=\"true\" title=\"Create\"></i>",
      "formButtons": ["<i class=\"fa fa-floppy-o fa-fw\" aria-hidden=\"true\" title=\"Save\"></i>", {
        "text": "<i class=\"fa fa-times fa-fw\" aria-hidden=\"true\" title=\"Cancel\"></i>",
        "action": function() {
          this.close();
        }
      }]
    }, {
      "extend": "edit",
      "editor": editor_conference_affiliations,
      "text": "<i class=\"fa fa-edit fa-fw\" aria-hidden=\"true\" title=\"Edit\"></i>",
      "formButtons": ["<i class=\"fa fa-floppy-o fa-fw\" aria-hidden=\"true\" title=\"Save\"></i>", {
        "text": "<i class=\"fa fa-times fa-fw\" aria-hidden=\"true\" title=\"Cancel\"></i>",
        "action": function() {
          this.close();
        }
      }]
    }, {
      "extend": "remove",
      "editor": editor_conference_affiliations,
      "text": "<i class=\"fa fa-trash fa-fw\" aria-hidden=\"true\" title=\"Delete\"></i>",
      "formButtons": ["<i class=\"fa fa-trash fa-fw\" aria-hidden=\"true\" title=\"Delete\"></i>", {
        "text": "<i class=\"fa fa-times fa-fw\" aria-hidden=\"true\" title=\"Cancel\"></i>",
        "action": function() {
          this.close();
        }
      }]
    }, {
      "extend": "csv",
      "text": "<i class=\"fa fa-file-excel-o fa-fw\" aria-hidden=\"true\" title=\"Export\"></i>"
    }],
    "select": true,
    "serverSide": true,
    "ajax": {
      "url": "/wiki/extensions/CFBHA/models/mConferenceAffiliations.php",
      "type": "POST",
      "data": []
    },
    "order": [1, "desc"],
    "columns": [{
      "defaultContent": "<i class=\"fa fa-chevron-right fa-fw\"></i>",
      "className": "row-selector",
      "orderable": false
    }, {
      "data": "season_name",
      "name": "season_name",
      "className": " inline"
    }, {
      "data": "school_code",
      "name": "school_code",
      "className": " inline"
    }, {
      "data": "school_name",
      "name": "school_name",
      "className": " inline"
    }, {
      "data": "conference_code",
      "name": "conference_code",
      "className": " inline"
    }, {
      "data": "sub_conference",
      "name": "sub_conference",
      "className": " inline"
    }, {
      "data": "w",
      "name": "w",
      "className": "text-right inline"
    }, {
      "data": "l",
      "name": "l",
      "className": "text-right inline"
    }, {
      "data": "t",
      "name": "t",
      "className": "text-right inline"
    }, {
      "data": "finish",
      "name": "finish",
      "className": "text-right inline"
    }, {
      "data": "non_participant",
      "name": "non_participant",
      "className": "text-center",
      "render": function(data, type, row) {
        if (type === 'display') {
          return '<input type=\"checkbox\" class=\"editor-non_participant\">';
        }
        return data;
      },
      "orderSequence": ["desc", "asc"]
    }, {
      "data": "ineligible",
      "name": "ineligible",
      "className": "text-center",
      "render": function(data, type, row) {
        if (type === 'display') {
          return '<input type=\"checkbox\" class=\"editor-ineligible\">';
        }
        return data;
      },
      "orderSequence": ["desc", "asc"]
    }, {
      "data": "remarks",
      "name": "remarks",
      "className": " inline"
    }],
    "keys": {
      "editor": editor_conference_affiliations,
      "columns": ".inline"
    },
    "scroller": {
      "loadingIndicator": true
    },
    "deferRender": true,
    "scrollX": true,
    "scrollY": "80vh",
    "scrollCollapse": true,
    "dom": "Brti",
    "rowCallback": function(row, data) {
      $('input.editor-non_participant', row).prop('checked', data.non_participant == 1);
      $('input.editor-ineligible', row).prop('checked', data.ineligible == 1);
    }
  }).on('click', 'td.row-selector', function() {
    conference_affiliations.cell.blur();
  }).on('click', 'tbody td.inline', function() {
    editor_conference_affiliations.inline(this, {
      drawType: none
    });
  }).on('change', 'input.editor-non_participant', function() {
    editor_conference_affiliations.edit($(this).closest('tr'), false).set('non_participant', $(this).prop('checked') ? 1 : 0).submit();
  }).on('change', 'input.editor-ineligible', function() {
    editor_conference_affiliations.edit($(this).closest('tr'), false).set('ineligible', $(this).prop('checked') ? 1 : 0).submit();
  });
  $("#conference_affiliations_season_name_filter").on("keyup change", function() {
    var colname = "season_name:name";
    if (conference_affiliations.column(colname).search() !== this.value) {
      conference_affiliations.column(colname).search(this.value).draw();
      editor_conference_affiliations.field("season_name").def(this.value);
    }
  });
  $("#conference_affiliations_school_code_filter").on("keyup change", function() {
    var colname = "school_code:name";
    if (conference_affiliations.column(colname).search() !== this.value) {
      conference_affiliations.column(colname).search(this.value).draw();
      editor_conference_affiliations.field("school_code").def(this.value);
    }
  });
  $("#conference_affiliations_school_name_filter").on("keyup change", function() {
    var colname = "school_name:name";
    if (conference_affiliations.column(colname).search() !== this.value) {
      conference_affiliations.column(colname).search(this.value).draw();
      editor_conference_affiliations.field("school_name").def(this.value);
    }
  });
  $("#conference_affiliations_conference_code_filter").on("keyup change", function() {
    var colname = "conference_code:name";
    if (conference_affiliations.column(colname).search() !== this.value) {
      conference_affiliations.column(colname).search(this.value).draw();
      editor_conference_affiliations.field("conference_code").def(this.value);
    }
  });
  $("#conference_affiliations_remarks_filter").on("keyup change", function() {
    var colname = "remarks:name";
    if (conference_affiliations.column(colname).search() !== this.value) {
      conference_affiliations.column(colname).search(this.value).draw();
      editor_conference_affiliations.field("remarks").def(this.value);
    }
  });
});

Loren Maxwell

Nope -- never mind, found the problem.

I hadn't put any of those in quotes!

OK, I'm good now.

Thanks, @allan.