datatable not clear rows

Itamarcus

I have a table that I fill without problems.
I can not remove all the rows following a command.
i use .clear().draw but not working.

the steps is:
load the table successfully with ajax call,
later, I try to delete all the lines. when I count the rows (StoricoElementoTable.rows().count()) it returns me the value 0, but it does not disappear from the table. I tried with the draw method (StoricoElementoTable.clear().draw) but it does not work.

tips?
thanks

kthorngren

Are you using "StoricoElementoTable.clear().draw" or "StoricoElementoTable.clear().draw()"?

The second one is what to use.

Kevin

Itamarcus

idem. it does not work anyway.

Itamarcus

probably is a bug.
I used this function in another similar context and it works. but then I can not regenerate the table. it is an instruction that has no guarantee of stability. better hide the whole table ...

kthorngren

Its hard to say what the problem is. I've never had a problem with clear() or draw(). Can you post a link to your page or a test case showing the issue so it can be debugged?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Itamarcus

it is complicated to recreate the page. use web API 2 with SQLserver. at the moment it is not online.
however, when I insert the instruction $ (' # ElementitDatatable '). DataTable (). rows (). clear (). draw ();, after, the ajax call does not work anymore !!
no error is found, simply the ajax call is ignored.
this is the ajax call ignored:

var ElementiTable = $('#ElementitDatatable').DataTable({
                    retrieve: true,
                    dom: 'Blfrtip',
                    paging: true,
                    sort: true,
                    pageLength: 5,
                    "lengthMenu": [[5,10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    lengthChange: true,
                    searching: true,
                    select: { style: 'multi' },
                    buttons: [
                        {
                            text: 'Select all',
                            action: function () {
                                ElementiTable.rows().select();
                            }
                        },
                        {
                            text: 'Select none',
                            action: function () {
                                ElementiTable.rows().deselect();
                            }
                        }
                    ],
                    "ajax": {
                        "url": '/api/Elementi/codiceopera/' + CodiceOpera.replace(/\./g, "-"),
                        "type": "get",
                        "dataSrc": "",
                        contentType: "application/json",
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    },
                    "columns": [
                        { "data": "CodiceElemento", "autoWidth": true },
                        { "data": "Campata", "autoWidth": true },
                        { "data": "TipologiaElemento", "autoWidth": true },
                        { "data": "Nelemento", "autoWidth": true },
                        { "data": "ListaAnomalie", "autoWidth": true },
                        { "data": "Note", "autoWidth": true },
                        { "data": "Stato", "autoWidth": true },
                    ]
                });

kthorngren

Sorry, I'm not understanding the problem. After you execute this:
$ (' # ElementitDatatable '). DataTable (). rows (). clear (). draw ();

Is the table cleared of data?

You mentioned that after executing the above that ajax call is ignored. Are you using something like ``$ (' # ElementitDatatable ').DataTable ().ajax.reload();` to reload the data after clearing the table?

Maybe you can show the code where you are inserting the clear() function and the ajax call is not working.

Kevin

Itamarcus

I have two problems with clear.draw.
In the first one, it works but then it inhibits the call ajax. In the second it does not work.
Let's see the first problem.
I have an html page with several tables. When I select a row in the first table, I load the data into the second one with an ajax call. So far, ok. When I deselect the first table row, I call the clear.draw statement for the second table. The table is emptied regularly. When I select a row from the first table again, I expect the ajax call to be repeated (the parameter can also change). Unfortunately, the ajax call is ignored. The debugging on the browser does not report any errors.

here is the code related to the selection

ProIspTable = $('#ProgIspDatatable').DataTable()
            ProIspTable.off('select');
            ProIspTable.on('select', function (e, dt, type, indexes) {

                if (type === 'row') {
                    RecuperaElementi(ProIspTable.rows(indexes).data().pluck('CodiceOpera')[0], ProIspTable.rows(indexes).data().pluck('ID_ProgrammaIspezioni')[0]);
                }
                if (ProIspTable.rows(indexes).data().pluck('Data')[0] == null) {
                    $('#GenIsp').removeClass('invisible').addClass('visible');
                }
                else {
                    $('#GenIsp').removeClass('visible').addClass('invisible');
                };
            });

here is the code related to the deselection

ProIspTable.off('deselect');
            ProIspTable.on('deselect', function (e, dt, type, indexes) {
           
                if (type === 'row') {
                   $('#ElementitDatatable').DataTable().rows().clear().draw();
                    $('#nbadgeselectionProgIsp').text(0);
                }
            });

The code for the ajax call is shown above.

kthorngren

When you select a row it looks like you are calling a function RecuperaElementi() with some values in the selected row?

Is this function where you are using the ajax call?

Are you able to post a link to the page or create a test case showing the issue? Would be much easier to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Itamarcus

yes...the ajax call is inside (with other istructions..) RecuperaElementi(CodiceOpera, ID).
all instructions are regularly performed. only the ajax call is ignored.

my project is not currently online. recreate a test case is very difficult.

kthorngren

Maybe you can post the code for the RecuperaElementi(CodiceOpera, ID) function?

As a test what happens if you comment out this line?
$('#ElementitDatatable').DataTable().rows().clear().draw();

If clear() is causing the problem then I would expect additional rows each time you select/deselect/select.

Kevin

Itamarcus

The clear statement flushes the table correctly. If you comment the instruction, the ajax call is correctly invoked for each selected line. However, if I deselect the row, the data remain in the second table. I would like to empty it.

The function code is:

            function RecuperaElementi(CodiceOpera, ID) {
                var ElementiTable = $('#ElementitDatatable').DataTable({
                    retrieve: true,
                    dom: 'Blfrtip',
                    paging: true,
                    sort: true,
                    pageLength: 5,
                    "lengthMenu": [[5,10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    lengthChange: true,
                    searching: true,
                    select: { style: 'multi' },
                    buttons: [
                        {
                            text: 'Select all',
                            action: function () {
                                ElementiTable.rows().select();
                            }
                        },
                        {
                            text: 'Select none',
                            action: function () {
                                ElementiTable.rows().deselect();
                            }
                        }
                    ],
                    "ajax": {
                        "url": '/api/Elementi/codiceopera/' + CodiceOpera.replace(/\./g, "-"),
                        "type": "get",
                        "dataSrc": "",
                        contentType: "application/json",
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    },


                    "columns": [
                        { "data": "CodiceElemento", "autoWidth": true },
                        { "data": "Campata", "autoWidth": true },
                        { "data": "TipologiaElemento", "autoWidth": true },
                        { "data": "Nelemento", "autoWidth": true },
                        { "data": "ListaAnomalie", "autoWidth": true },
                        { "data": "Note", "autoWidth": true },
                        { "data": "Stato", "autoWidth": true },
                    ]
                });
                ElementiTable.rows().deselect();
                $('#nbadgeselectionProgIsp').text(ElementiTable.rows({ selected: true }).count());

                ElementiTable.off('select');
                ElementiTable.off('deselect');
                ElementiTable
                    .on('select', function (e, dt, type, indexes) {
                        $('#nbadgeselectionProgIsp').text(ElementiTable.rows({ selected: true }).count());
                    })
                    .on('deselect', function (e, dt, type, indexes) {
                        $('#nbadgeselectionProgIsp').text(ElementiTable.rows({ selected: true }).count());
                    });

                $('#GenIsp').on('click', function () {
                    var rows = [];
                    ElementiTable.rows({ selected: true }).every(function (rowIdx, tableLoop, rowLoop) {
                        cur = {};
                        cur['ID_ProgrammaIspezioni'] = ID
                        cur['CodiceElemento'] = this.data().CodiceElemento.replace(/\./g, "-")
                       
                        rows.push(cur);
                        cur = {};
                    });
                    

                    $.ajax({
                        type: "POST",
                        url: '/api/Ispezioni/',
                        data: JSON.stringify(rows),
                        "dataSrc": "",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            alert("Dati Inviati!");
                        },
                        error: function (xhr, status, error) {
                            alert(JSON.stringify(rows)); 
                            alert(xhr.responseText);
                        }
                    });
                })
            }

kthorngren

Thanks having a more complete code helps understand what you are doing. I didn't realize the function had your Datatable init code. You have retrieve: true, which according to the retrieve documentation is not designed to behave as you are expecting:

Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up

Essentially that means the ajax option within the Datatable init code is not going to execute a second time. Instead of retrieve you could use destroy. I put together a simple example based on your code:
http://live.datatables.net/pamageca/1/edit

In the example, you can change the config from destroy: true to retrieve: true and see the same behavior your are talking about.

Another option is to init that Datatable outside of the function then just use jQuery's ajax function to retrieve the data and rows.add() to add the data to the table.

Kevin

Itamarcus

good.
after avers replaced retrieve with destroy, the code behaves correctly.
Many thanks