How can I delete specific rows based on the rows content?

Method_dev

For example if I already initialized my DataTables via

$(‘#myTable’).DataTable();

How would I search the first and second column for something like 1317199 and remove the rows accordingly?

I’ve been looking at the .remove() method but can’t seem to piece it together.

kthorngren

One way is to use the rows() API to get the desired rows using the row-selector as a function to filter the rows to be removed. This example has two buttons; one to show the rows with 1317199 and the other to remove them.
http://live.datatables.net/wowokihi/1/edit

Kevin

Method_dev

Thanks @kthorngren ! that worked for removing them, can I switch .remove() with .hide() to hide them as well?

Now I am just stuck trying to hide specific rows and iterating through only non-hidden rows.

kthorngren

You can use search() or column().search() to filter the rows from being displayed while keeping them in the table. Datatables doesn't support using something like jQuery hide() as it doesn't know about the hidden row - you could see odd behavior when using other Datatables functions like sorting or searching.

After using search you can use selector-modifier to iterate over the visible rows after a search using {search:'applied'}.

Kevin

Method_dev

@kthorngren So I did that, and hide the rows but the problem is when I hide one the others I have hidden come back, is there a way to hide multiples are once?

kthorngren

Maybe you can update the example or provide your own so we can see exactly what you have.

Not sure how you are deciding what you want to hide. Its possible you need to build an array then you column().search() in regex mode. See the search() docs for more info.

Kevin

Method_dev

@kthorngren

so basically I have a user click a button which changes column 13 to "Yes" in the HTML. so I need the datatable to recognize that change then hide the row accordingly.

the example you provided does great for removing but if I do

$('#remove').on('click', function () {
table
.rows( function ( idx, data, node ) {
return data[0] === '1317199' || data[1] === '1317199' ?
true : false;
} )
.hide();

it errors out

Method_dev

@kthorngren

or is there a way to update a rows data using datatables? that could work as well.

I am trying:

$('#myTable').DataTable().rows().data().each(function (t) {
if (t[1] == "bob") {
t[13].data = "test";
}
});

kthorngren

.hide()

Is not an API for rows(). Datatables doesn't have a method to hide rows this way. Using something like jQuery .hide() would hide the row in HTML but Datatables won't know about it.

If you want to perform an OR type search across columns you will need to use a Search Plugin.

or is there a way to update a rows data using datatables?

Yes you will use the row().data() API.

This thread may be of interest to you. The solution the OP is looking for might be a bit different than yours but the ways to show/hide data and to update data based on an input are the same. Take a look at my last example in the thread. The ordering part you might not be concerned with.

If this doesn't help please build a simple test case representing what you want to do so we can help. There are many ways to do the things you are asking about. A test case will help us give you the best answers.

Kevin

Method_dev

thanks @kthorngren , now I just need to find out how to get the rowid from datatables using:

$('#myTable').DataTable().rows().data().each(function (t) {
if (t[0] == rid.innerHTML.trim()) {
console.log(t);
}
});

and I am done

kthorngren

Depends on what you have but row().id() may work.

Kevin

Method_dev

@kthorngren

this is what i have

var rowCount = 0

$('#myTable').DataTable().rows().every(function () {
                        var row = this.data();
                         //console.log(row.id()); - doesn't work
                         
                         if (row[1] == "bob") { 
                            this.cell({ row: rowCount, column: 13 }).data('Yes');
                            console.log(rowCount + " || " + row[2]);
                       
                        }

                        rowCount++;
                    });

but it doesn't seem to update the row it is on and I even tried:

var rowCount = 0;

                     $('#myTable').DataTable().rows().every(function () {
                        var row = this.data();
                         console.log(this.id());
                         
                         if (row[1] == "bob") { 
                             this.cell({ row: this.id(), column: 13 }).data('Yes');
                            console.log(rowCount + " || " + row[2]);
                       
                        }

                        rowCount++;
                    });

which it won't update and instead returns

bootstrap?v=L9kG_LAjpBUGp2GsNM9NO_nUZZlgL2ewioUrsGhoQXI1:1 Uncaught TypeError: Cannot read property '_aData' of undefined

Method_dev

@kthorngren

I GOT IT!

$('#myTable').DataTable().rows().every(function () {
var row = this.data();
console.log(this.selector.rows);

                     if (row[1] == "bob") { 

                         $('#myTable').DataTable().cell({ row: this.selector.rows, column: 13 }).data('Yes');
                         console.log(rowCount + " || " + row[2]);

                    }


                });