seachBuilder.rebuild moving viewpoint to top

cj1005

Hi,

I have some buttons that apply some preset filters (using searchBuilder), these buttons also show within their captions a count for each filter (ie. button 1 caption is 'Active (12)', button 2 is 'OnHold (4)' and button 3 is 'Done (243) ).

The issue I'm having is after I do a CRUD request I use setTimeout() to call recountFilters() which updates the button captions, all is working fine except once the recount is done, the viewpoint of the table is moved to the top.

I believe the issue is to do with searchBuilder.rebuild(), so is there a way to tell searchBuilder.rebuild to stay at the current viewpoint?

The 'recountFilters' function below is called when the table is initialised, on any CRUD request (using 'postSubmit') and when clicking the preset filter buttons (which recounts just for that filter):

<button class="dt-button" type="button" id="active" >Active</button>
<button class="dt-button" type="button" id="onhold" >OnHold</button>
<button class="dt-button" type="button" id="done" >Done</button>
<button class="dt-button" type="button" id="all" >All</button>

$('#active').on('click', function() {
    recountFilters('active');
})
$('#onhold').on('click', function() {
    recountFilters('onhold');
})
$('#done').on('click', function() {
    recountFilters('done');
})
$('#all').on('click', function() {
    recountFilters('all');
})

todolistTable.on ('init', function ( e, settings, json ) {
  recountFilters;
});

$(document).ready(function() {
  todolist_editor.on('submitSuccess', function(e, json) {
    setTimeout(recountFilters, 500);
  });
});

var cSBActiveFilter = { "criteria": [ { "condition": "=", "data": "Active", "value": [ 1 ] }, { "value": [] } ], "logic": "AND" };
var cSBOnHoldFilter = { "criteria": [ { "condition": "=", "data": "OnHold", "value": [ 1 ] }, { "value": [] } ], "logic": "AND" };
var cSBDoneFilter = { "criteria": [ { "condition": "!null", "data": "Completed", "value": [ ] }, { "value": [] } ], "logic": "AND" };

function recountFilters(cSet){
  var restoreDT = $('#dttodolist').DataTable().searchBuilder.getDetails();
  if (cSet === undefined) { var cSet = '' };
  console.log("recount called with "+cSet);
  if (cSet === '' || cSet === 'active' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBActiveFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#active').text('Active ('+rowCount+')')
  }
  if (cSet === '' || cSet === 'onhold' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBOnHoldFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#onhold').text('OnHold ('+rowCount+')')
  }
  if (cSet === '' || cSet === 'done' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBDoneFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#done').text('Done ('+rowCount+')')
  }
  if (cSet === '') { $('#dttodolist').DataTable().searchBuilder.rebuild(restoreDT); }
  if (cSet === 'all') { $('#dttodolist').DataTable().searchBuilder.rebuild(); }
}

Please note, it is only when I call 'recountFilters' without any parameters that it is an issue, as all other calls with parameters
should go to the top of the table.

If I turn off the 'recountFilter' function everything works perfectly, so I really just want a way of blocking searchBuilder.rebuild from moving the viewpoint.

Any suggestions are welcome?

Regards, Chris

cj1005

I have found the solution to this issue, I had to store the scrollTop position prior to calling searchBuilder.rebuild() and then restore the position once the rebuild is completed.

See my revised function below:

function recountFilters(cSet){

  var pos = $('div.dataTables_scrollBody').scrollTop();

  var restoreDT = $('#dttodolist').DataTable().searchBuilder.getDetails();
  if (cSet === undefined) { var cSet = '' };
  console.log("recount called with "+cSet);
  if (cSet === '' || cSet === 'active' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBActiveFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#active').text('Active ('+rowCount+')')
  }
  if (cSet === '' || cSet === 'onhold' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBOnHoldFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#onhold').text('OnHold ('+rowCount+')')
  }
  if (cSet === '' || cSet === 'done' || cSet === 'all') {
    $('#dttodolist').DataTable().searchBuilder.rebuild(cSBDoneFilter);
    var rowCount = $('#dttodolist').DataTable().rows({search: 'applied'}).data().toArray().length;
    $('#done').text('Done ('+rowCount+')')
  }
  if (cSet === '') { $('#dttodolist').DataTable().searchBuilder.rebuild(restoreDT); }
  if (cSet === 'all') { $('#dttodolist').DataTable().searchBuilder.rebuild(); }

  $('div.dataTables_scrollBody').scrollTop(pos);

}

colin

Nice, glad all sorted,

Colin