how to keep scroller fixed

jkjkj

hello ,all ,i create a datatable with the following codes
table = $("#Table").on('key-focus', function (e, datatable, cell) {
console.log("the key pressed and do something……")
}).DataTable({
keys: true,
scrollY: "200px",
autoWidth: false,
deferRender: true,
paging: true,
scroller: true,
scrollX: true,
responsive: false,
order : [
[5,"asc"],
[4,"desc"],
[2,"desc"],
[3,"asc"],
]
columns: [{
title: 'column1',
orderable: false,
width: "100%",
render: function (data, type, valueOfElement, meta) {
return data = '……';
}
}]
});

and i will add a lot of data into the datatable after init,so the scroller will scroll to another position and the data i am browsing or processing will disappeared in the visible area. i wanna know how to keep the relative position of the visible rows will not change,thank you

kthorngren

i will add a lot of data into the datatable after init

Are you saying you are using row.add() or rows.add() to add the rows? If so try passing false into draw(). For example:

table.rows.add( ... ).draw( false );

See the draw() docs for all the options. If this doesn't help then please provide more details of how you are adding the rows. Better is a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jkjkj

yes, i use row.add().draw(false) to add rows.but it also will scroll slowly from top to bottom. because one of orders is desc by timestamps.because my code is not publish yet,so i can not link to it

kthorngren

I created an example where the table doesn't scroll when adding rows:
https://live.datatables.net/dodobuge/4/edit

It stays on the same page (no scrolling), you can see this by watching the info element, ie Showing 19 to 24 of 570 entries, each time you click the add rows.

Can you update the test case to show the issue you are trying to solve?

Kevin

jkjkj

yes ， i've edited it ,you move the scroller to some posiotion at center(not at the start), you will see the scroller is scroll by itself when click add rows some times

https://live.datatables.net/dodobuge/5/edit

jkjkj

even if in https://live.datatables.net/dodobuge/5/edit, the info element is not change too, but i wanna the fixed one is the selected item not the index range

allan

I'm really confused. Loading Kevin's example, if I:

1. Scroll down the table
2. The info element says "Showing 21 to 26 of 57 entries"
3. Click Add rows button
4. The scroll from the top of the table stays the same, and
5. The info element is updated to be "Showing 21 to 26 of 114 entries"

Can you give step by step instructions on how to reproduce the issue?

Allan

jkjkj

1. Scroll down the table
2. The info element says "Showing 21 to 26 of 57 entries"
3. select one row as processing one
4. Click Add rows button
5. The info element is updated to be "Showing 21 to 26 of 114 entries",but the selected row has disappered from the visible area.because i set the order option,so some of added rows will insert before selected row,and other rows will added after seleted row.but because the table always Showing 21 to 26 of xxx entries,so the index of selected row is not in 21-26,so it hidden.
6. so what i wannt is after clicked add rows button,the selected row's index maybe 36,and the table will show 31to 36 rows of xxx entries. just keep the selected row's position will fixed like "display:fixed"

allan

but the selected row has disappered from the visible area

I would expect that. We don't attempt to keep the selected row in view (indeed, the user might already have scrolled away from it). The scrollTop just stays the same.

If you need to have the selected row stay in view, you'd need to find the position of the row in the table after having inserted the rows (row().node() and get its offset) and then change the scrollTop of the container. That isn't something we'd put into DataTables core I don't think.

Allan