DataTables default pageLength not working (code inside)

taerarenai

Hey guys, i've got DataTables to modify a HTML table so it adds searching, sorting etc. No ajax source or whatever, just a simple HTML table. The problem is that by default the pageLength is not working. The selection shows as blank and that causes problems.
Because of this clicking "Next" on pagination gives an error ->

Uncaught TypeError: Cannot read property 'nTr' of undefined
    at P (datatables.min.js:56)
    at s.<anonymous> (datatables.min.js:133)
    at s.iterator (datatables.min.js:127)
    at s.<anonymous> (datatables.min.js:133)
    at s.draw (datatables.min.js:130)
    at m (datatables.min.js:202)
    at HTMLLIElement.<anonymous> (datatables.min.js:102)
    at HTMLLIElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLLIElement.elemData.handle (jquery-3.3.1.js:4991)

Also browsing through different pages displays duplicates.
ALL of these problems are fixed as soon as i select a different page length (10,25 whatever i choose). Selecting something else gets rid of duplicates, "next" button works etc.

Any idea what could cause this ? There's no error in the console...

        oTable = $('.sortTable').DataTable({
            "autoWidth": false,
            "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
            "columnDefs": [{
                    "width": "30%",
                    "targets": 0
                }, {
                    "width": "10%",
                    "targets": 1
                },
                {
                    "width": "15%",
                    "targets": 2
                },
                {
                    "width": "10%",
                    "targets": 3
                },
                {
                    "width": "10%",
                    "targets": 4
                },
                {
                    "width": "10%",
                    "targets": 5
                },
                {
                    "width": "0%",
                    "targets": 6
                },
                {
                    "width": "0%",
                    "targets": 7
                },
                {
                    "width": "0%",
                    "targets": 8
                }
            ]
        });

colin

Hi @taerarenai ,

The configuration looks ok, so my guess is that there's something wrong with the HTML formatting in the table. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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

taerarenai

Hi @colin ,

Well it seems there's no more need for a test case. Found the problem (thanks for pointing out the HTML formatting, apparently someone modified the code without me knowing).

The problem is that the table element had this ->

data-page-length="25 "

Apparently that was keeping everything "fixed at 25" and giving an error on "Next" button.

I've got one more question (lemme know if i need to post another topic for this one) if you may. I'm using a class inside the table (on one of the columns) that does something on click. Unfortunately the jquery onclick does not fire for all of the items. It only fires for the first page and i assume thats because when i'm changing the page it redraws or something like that.

Any idea if there's any DataTables way of fixing this ?

colin

Hi @taerarenai ,

Yep, no need for another thread - that's an easy one. See this FAQ here.

Cheers,

Colin

taerarenai

@colin Yep, that FAQ helped, many thanks!