Table scrolls to top after edit

Table scrolls to top after edit

Loren MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
    edited February 2018

    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 MaxwellLoren Maxwell Posts: 382Questions: 93Answers: 10
    Answer ✓

    Nope -- never mind, found the problem.

    I hadn't put any of those in quotes!

    OK, I'm good now.

    Thanks, @allan.

This discussion has been closed.