Numbering not working with deferender

PutriAlvionia

hi, i'm still new for this kind things, i wish someone can give me some advice

i use deferender for load 10.000 more data to data table, and i have numbering row to.
but the number only show in paging 1 and 2, and the rest has [Object] in column number. are there any other way beside deferender for load more than 10.000 data faster and still can get number row ? or what should i do if still can using deferender and fix numbering in column number for numbering row?

here is the code i used for numbering and deferender data,

  $(document).ready(function () {
            //datatable
            $('#tbKon').DataTable();

            //setting index number datatable
            $('#tbKon').DataTable().on('order.dt search.dt', function () {
                $('#tbKon').DataTable().column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
        });

 $('#tbKon').DataTable({
                        data: mdl,
                        columns: [
                            { "data": null },
                            {
                                "data": null,
                                "render": function (data, type, row, meta) {
                                    if (type === 'display') {
                                        data = '<a href="/Kondisi/Update?Id=' + data.CodeKon + '"><i class="fas fa-edit" style="font- size:50px"></i></a>';
                                    }
                                    return data;
                                }
                            },
                            { "data": "CodeKon" },
                            { "data": "NameKon" },
                            { "data": "Status" }
                        ],
                        "responsive": true,
                        "autoWidth": true,
                        "scrollY": 300,
                        "scrollX": true,
                        "bDeferRender": true,
                        "columnDefs": [
                            {
                                "targets": [1],
                                "width": 25,
                                "className": "text-center",
                            },
                        ]
                    });

colin

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

PutriAlvionia

hi Colin, thanks for help me.. i have a problem for give you live datatable link.. because i tried to replicate sample but i couldn't modificate the data in ajax.. so it came out empty... maybe you can help me with the sample...

http://live.datatables.net/zujatumo/1/edit

thank you so much for trying to help me...

kthorngren

For this test case it will be better to use the object based ajax example. The link is [here[(https://datatables.net/manual/tech-notes/9#Ajax-loaded-data). Here is the updated test case using objects:
http://live.datatables.net/zujatumo/2/edit

The deferRender option only renders the cells being displayed on the page. This means that the column().nodes() API used doesn't have access to all the nodes causing [Object] to be displayed. The order and search events occur before the draw event. I change the test case to use the draw event and it seems to work now. Note that I removed the .draw() on line 10 of your above code snippet.

Kevin

PutriAlvionia

hai kevin, thank you so much for helping,
your code was right, i tried them and it is working..
but have another problem is, if i use draw.dt when i jumped to page for example page 4 from page 1, the number must be 41-50 but instead the number in page 4 became 11-20.. can we resolve that?

i really really appriciate, and thankfull with your help by the way...

kthorngren

One option is to use cells().every() to loop through all the cells in the column. Then set the cell data in the loop instead of the HTML. Something like this:
http://live.datatables.net/zujatumo/3/edit

This sets the index column once and doesn't change based on sorting or searching. Note that column 0 uses data: "index" instead of data: null. index can be anything as long as its not one of the objects in the data set. Basically its defined locally. The defaultContent setting stops any errors that would occur since the data doesn't have the object index.

Kevin