Remove() on hidden rows

bogdan · September 2014

Hello all,

I'm using datatables to store information about a objects location. The information is updated every 10 seconds. The problem appears when the datatable is filtered (e.g. user is searching by name) and the table is showing just a subset of rows or even no rows.
I can identify the rows I want to update (by remove than add a new row) using table.row('[id=' + feature.uid + ']') but when I try to delete those rows with table.row(row).remove().draw(); nothing is happening. If the rows are not visible I cannot update/remove.
Any ideas would be appreciated.

Regards,
Bogdan

allan · September 2014

Can you link to a page showing the problem please?

table.row(row).remove().draw();

What is row in the above?

Allan

bogdan · September 2014

Hi Allan,

I cannot link to a page, sorry! In order to delete the rows i select the rows that have a class I've added on fnRowCallback event.

    var rows = $("tr." + feature.properties.mmsi);
    var rowData = tableAis.rows(rows);

    if (rowData.length > 0) {
        var arrayLength = rowData.length;
        for (var i = 0; i < arrayLength; i++) {
            var tr = tableAis.row(rowData[i]).remove().draw();

        };
    }

Works very well if the rows I want to delete are visible. Same result even if I try to delete them directly:

tableAis.rows(rows).remove().draw();

A screenshot with the actual table: http://imgur.com/Qnz4l6e

Bogdan.

allan · September 2014

$("tr." + feature.properties.mmsi);

That is the problem since it only selects rows which are int he DOM, but DataTables removes elements which aren't needed for the current display.

I think a lot more succinct way of doing the above is simply:

tableAis.rows( "tr." + feature.properties.mmsi ).remove().draw();

Allan

bogdan · September 2014

It works but than after few rounds i get on remove().draw()

TypeError: a is null
...,h=a.length;while(h--)(f=g[h])&&(a[h]=!(b[h]=f))}):function(a,e,f){return b[0]=a...

In IE 10:
Unable to get property 'nodeType' of undefined or null reference
File: jquery.min.js, Line: 2, Column: 23372

Bogdan.

bogdan · September 2014

Can it be the case that i add records that are not visible and than i try to remove/update them?

Bogdan

allan · September 2014

I'm not sure what would cause that I'm afraid. Unfortunately I really would need a way to reproduce that error to be able to debug it as I don't know what would cause it.

Allan

bogdan · September 2014

Ok, I will try to prepare a sample to reproduce the error.

Bogdan

bogdan · October 2014

Hi Allan

I prepared an example:

Search by e.g. xxxxx (no rows are visible)
add 5 rows
try to delete the number 5

<html>

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

    <title>Rows</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" >

    <script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" class="init">
        $(document).ready(function () {
            var t = $('#example').DataTable({
                deferRender: true,
                "bProcessing": true,
                paging: false,
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    $(nRow).attr('id', aData[2]);
                    $(nRow).addClass("" + aData[2]);
                    return nRow;
                }
            });
            var counter = 1;

            t.row.add([counter, counter, counter]).draw();
            counter++;
            $('#addRow').on('click', function () {
                t.row.add([counter, counter, counter]).draw();
                counter++;
            });
            $('#deleteRow').on('click', function () {
                t.rows("tr.5").remove().draw();
            });
        });
    </script>
</head>

<body class="dt-example">
    <div class="container">
        <button id="addRow">Add new row</button>
        <button id="deleteRow">Delete existing row</button>
        <table id="example" class="display" width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Column A</th>
                    <th>Column B</th>
                </tr>
            </thead>
        </table>
    </div>

</body>

</html>

Bogdan

allan · October 2014

deferRender: true,

You have deferred rendering enabled. Therefore the row node (and the cells) haven't been created and the selector cannot operate on them.

Additionally, you are using fnRowCallback to add the class and ID. It is called only when the cell is drawn - which is not in your above use case.

The "fix" is to not enable deferred rendering and to use createdRow: http://live.datatables.net/wehelise/1/edit

Allan

bogdan · October 2014

Thank you for the solution!

Bogdan.

Remove() on hidden rows

Remove() on hidden rows

Replies

Howdy, Stranger!

Categories

DataTables

Remove() on hidden rows

Remove() on hidden rows

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables