KeyTable, bDeferRender, bPaginate -- Uncaught TypeError: Cannot read property 'top' of undefined

KeyTable, bDeferRender, bPaginate -- Uncaught TypeError: Cannot read property 'top' of undefined

DsNchNtDDsNchNtD Posts: 1Questions: 1Answers: 0

Ran into this problem with KeyTable when using deferRender. If you focus a cell on a page and then SKIP a page in the pagination selector (ie. focus cell on page 1 then click on paginator page 3) it will throw this error and break the table select:

Uncaught TypeError: Cannot read property 'top' of undefined
at n._scroll (datatables.min.js:299)
at n._focus (datatables.min.js:296)
at HTMLTableElement.<anonymous> (datatables.min.js:292)
at HTMLTableElement.dispatch (jquery.js:5)
at HTMLTableElement.v.handle (jquery.js:5)
at Object.trigger (jquery.js:5)
at Object.e.event.trigger (jquery.js:9)
at HTMLTableElement.<anonymous> (jquery.js:5)
at Function.each (jquery.js:4)
at e.fn.init.each (jquery.js:4)

Here's an example i got up on the live site after cutting down my code:
http://live.datatables.net/povuvula/1/edit

I love the tool btw. Tons of features, and I can see how much effort has gone into making it do just about whatever you could possibly want. :smile:
I really hope this problem will get solved soon as this KeyTable feature is what many of our users are asking for!

Answers

  • jpaikjpaik Posts: 1Questions: 0Answers: 0

    So the reason why this is happening is not because you're skipping the page.

    DataTables tries to go to the scrolltop of the last cell that was focused. So if on Page 1 you are on row 10 and you go to page 3 or something but page 3 only has 4 rows, it will try to go to the 10th row of the page. BUT since it doesn't exist, it throws this error.

    The solution that I found was that on changing pages, focus on the first cell of the table.

    https://datatables.net/reference/event/page

    So on page change, do something like:

    table.cell(':eq(0)').focus()

    which will focus on the first row.

  • Ashish_BhalodiyaAshish_Bhalodiya Posts: 1Questions: 0Answers: 0

    We are using KeyTable to bind approximate 150K records with using deferRender. And getting the same error as above when selecting row after moving from one page to another page through pagination.

    We have also tried the solution you have provided.

    following is my code snippets:

    dataTable.on('page.dt', function (e, settings, ordArr) {
    dataTable.cell(0, 0).focus();
    });

    focused on first cell of first row of data table but doing this the pagination has stopped working and unable to move from one page to another page. Please provide another solution if any.

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    @Ashish_Bhalodiya We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.