Table jumps back to first row when row click expands
Table jumps back to first row when row click expands
bbrindza
Posts: 316Questions: 73Answers: 1
My table will jump back to the top row when I click on an row to expand. How do I prevent this from happening.
var table = $('#timeLogTable_Vacation').DataTable( {
rowCallback: function(row, data, index){
if(data['time_log_date_yyyymmdd'] <= date){
$(row).find('td:eq(0)').css('color', 'red');
$(row).find('td:eq(1)').css('color', 'red');
$(row).find('td:eq(2)').css('color', 'red');
}
},
displayLength:100,
scrollY: '495px',
scrollCollapse: true,
paging: false,
dom: 'Bfrtip',
language: { sSearch: 'Table Search: '},
buttons: {
buttons: [
{ text: 'Create Vacation Day',
attr: { id: 'displayVacationDayModalButton'},
action: function ( e, dt, node, config ) {displayVacationDayModal() }
},
{ text: 'Remove Vacation Entry',
className: 'btn-danger',
attr: { id: 'removeVacationDayModalButton'},
action: function ( e, dt, node, config ) {removeVacationDayModal() },
enabled: false
}
],
dom: {
button: { className: 'btn btn-primary'},
buttonLiner: { tag: null }
}
},
processing: true,
serverSide: true,
ajax: {
url: "ssp_TimeLogTable_Vacation.php",
dataType: 'json',
data: {employeeNumber: employeeNumber,
employeeDepartmentCode: employeeDepartmentCode },
},
columns: [
{ data: 'time_log_year', visible: false},
{ data: 'employee_last_name', visible: false},
{ data: 'employee_full_name', visible: false},
{ data: 'employee_manager_number', visible: false},
{ data: 'sort_date', visible: false},
{ data: 'created_by', visible: false},
{ data: 'created_on', visible: false},
{ data: 'time_log_date_yyyymmdd', visible: false},
{ data: 'out_of_office', orderable: false},
{ data: 'time_log_date', orderable: false },
{ data: 'total_hours', orderable: false}
],
select: {style: 'single'},
order: [[1, 'asc'],[2, 'asc'],[4, 'asc']],
rowGroup: {
dataSrc: [ 'time_log_year', 'employee_full_name'],
startRender: function (rows, group, level) {
var all;
if (level === 0) {
top = group;
all = group;
} else {
// if parent collapsed, nothing to do
if (!!collapsedGroups[top]) {
return;
}
all = top + group;
}
var collapsed = !!collapsedGroups[all];
rows.nodes().each(function (r) {
r.style.display = 'none';
if (collapsed) {
r.style.display = '';
}});
//fontawsome + and -
var toggleClass = collapsed ? 'fa fa-minus-circle' : 'fa fa-plus-circle';
var groupTD = '';
if(level == 0){
groupTD = '<td colspan="' + rows.columns()[0].length +'">' + group + '</td>'
}else{
groupTD = '<td colspan="' + rows.columns()[0].length +'">' + '<span style="color:#007bff;" class="fa fa-fw ' + toggleClass + ' toggler"/> ' + group + ' (' + rows.count() + ')</td>'
}
// Add category name to the <tr>
return $('<tr/>')
.append(groupTD)
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
}
},
});//END .dataTable
$('#timeLogTable_Vacation tbody').on('click', 'tr.dtrg-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.buttons(1).disable();
table.draw(false);
});
table.on( 'select deselect', function (e, dt, type, indexes) {
//reset button to disabled
var selectedRows = table.rows( { selected: true } ).count();
table.button( 1 ).disable( selectedRows > 0 );
var data = table.rows(indexes).data();
var timeLogDate = data[0]['time_log_date_yyyymmdd'];
var createdBy = data[0]['created_by'];
var employeeManagerNumber = data[0]['employee_manager_number'];
var surrogateFound = surrogateManagers.includes(employeeManagerNumber);
if( (createdBy.trim() == userProfile.trim() && timeLogDate <= date) || (surrogateFound == false ))
{
return
}else{
var selectedRows = table.rows( { selected: true } ).count();
table.button( 1 ).enable( selectedRows > 0 );
}
});
$('#timeLogTable_Vacation').on( 'page.dt', function () {
table.buttons(1).disable();
});
This question has accepted answers - jump to:
This discussion has been closed.
Answers
I assume you are talking about this code to expand the rowGroups?
With
draw(false)the table should stay on the same page. Similar code in this example seems to work:http://live.datatables.net/buqecuva/1/edit
The example uses Server Side processing like your code snippet. Please update the example to show the issue.
Kevin
I attached an animation of what I am experiencing with the code I posted.
Notice in the animation, when I scroll down to Taylor, Khalladi and click the row to expand, the table jumps back to the first row, which forces the uses to scroll back down to view the details in the row they expanded.
Please provide a link to your page or a test case showing the issue so we can see what is happening. Or update my example to show the issue. Seeing the animation is not enough for us to debug your code snippets.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Kevin,
The application I am having the issue with is wired to a dashboard and would be time consuming and difficult to create as a standalone application in a BIN example. Moreover it is behind a corporate firewall so public access is not available.
Your example is not quite what I am doing, my expand/collapse function uses a different technique. Outside of the code snippet I posted there is not much more that I could present that would be helpful.
If you are not familiar with the technique I am using, then perhaps you may not be able to help me.
Looks like there is code to handle the multiple levels but in general it looks the same to me. However if you feel the technique you are using is causing the problem then please update my example to show the issue.
Perhaps.
Kevin
Kevin,
I hope you do not feel my reply was rude, I did not suggests that you are not capable of assisting I was just pointing out the difference in your code example vs my snippet of code.
However I found the issue , it is the use of scrollY: '495px'. Once I commented it out the table expand/collapse worked as expected.
The reason why I need this is to lock the header so the user can still see the buttons at the top as they scroll. I tried fixed header but that did not work.
If you have a suggestion or thoughts regarding this, it would be greatly appreciated.
Again I apologize if you felt I was being rude, that was not my intention ... I am not much of a word smith.
Good find. I updated my example to show this:
http://live.datatables.net/gacireza/1/edit
Not sure why
scrollYexhibits that behavior. I took a quick look at using something like scrollIntoView() but it didn't work. Maybe its because of the way Datatables handles scrolling.The Scroller extension has a couple methods to scroll the table:
https://datatables.net/reference/api/#scroller
Not sure either will help but might be worth looking into. You will probably need to get the row index of the closest table row to the group clicked.
@allan or @colin may have other options for you.
No worries. I was just agreeing with you.
Kevin
I've been playing around with this and I think it's unavoidable. The
draw()will take it to the top of the page. You can use the jQueryscrollTop()to slide down, but then you get a bounce effect which probably isn't very desirable.Colin
Colin,
What do you mean by a bounce effect.
Is this where the table jumps to the top and then back down to the row expanded?
I was just messing around with
scrollTopand realised that it doesn't need it - see here: http://live.datatables.net/gacireza/2/editIt just needs
draw()passed in withpageand the position is held. Can you take a look, please, and see if that does the trick for you,Colin
Interesting, I've never used the
pageparameter. I've always usedfalsewhich usually does the trick but not in this case. Leaser something new everydayKevin
Colin,
That did the trick. Your are a warlock! Thank you for the assistance.
And thank you Kevin for your input.
We all learned something today that we can share with the community.
DataTables Strong...