How to find a specific row by values in jQuery datatables?

Question

I would like to find a specific row by value within a datatables table out of a modal window. I was looking on https://datatables.net/reference/type/row-selector but as I understand it's all based on selectors or internal IDs. In my case I have 2 columns where I want to be able to lookup for the specific row to update the record after ajax request.

success: function (data) {
                if (data.status_id > 0) {
                    alert(data.info);
                } else {
                    alert(data.info);
                }
                contractsTable.row.add(dataJSON).draw(false);
         }

EDIT

Here my code now - I've built my own unique rowid and used selector by id

Retrieving the data object

...
var d = datatable.row(this).data();
... set form values and so on

Save and Refresh datatable

$('#contractEditSave').on('click', function (e) {

        dataJSON = {
            id: $('#contractEditForm').data('contractid'),
            member_id: $('#contractEditForm').data('memberid'),
            member_name: $('#contractEditModalTitle').text(),
            box_id: $('#contractBox').val(),
            name: $('#contractName').val(),
            description: $('#contractDescription').val(),
            start: $('#contractStart').val(),
            end: $('#contractEnd').val(),
            amount: $('#contractAmount').val(),
            unit: $('#contractUnit').val(),
            max: 1
        };

        $.ajax({
            type: 'POST',
            url: '/save',
            data: JSON.stringify(dataJSON),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                if (data.status_id == 0)
                    datatable.row('#' + dataJSON.id).data(dataJSON); //if update
                    ...
                } else {
                    datatable.row.add(dataJSON).draw(false); //if insert
                    ...
                }



                $("#contractEditModal").modal('hide');

            }
        });
    });

A search() is the way to find specific rows by value. Please elaborate what you mean by "find" and "specific row" and "value". Code is more than appreciated. — davidkonrad
– davidkonrad, Commented Jul 15, 2016 at 9:29

Gyrocode.com · Accepted Answer · 2016-07-15 14:15:08Z

11

You can use fnFindCellRowIndexes to find row index holding certain data in given column.

Then you can use cell().data() API method to update the cell.

var table = $('#example').DataTable();

var rowId = $('#example').dataTable()
   .fnFindCellRowIndexes('Angelica Ramos', 0);

table
   .cell(rowId, 0)
   .data('Angelica Ramos (UPDATED)')
   .draw(false);

Please note that you need to include fnFindCellRowIndexes.js in addition to jQuery DataTables CSS/JS files.

See this jsFiddle for code and demonstration.

answered Jul 15, 2016 at 14:15

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

davidkonrad Over a year ago

Seems to be the most beneficial solution. Either way, you'll have to add some filtering yourself.

nhaberl Over a year ago

Absolutely perfect answer ... What I've done though is to create a surrogate id out of my 2 values and set it to the rowid option. Then I'm using the wonderful row(string rowid) function to determine the row and passes the data as an object (which I had to parse to set the modal form values) to the .data() function - works perfect!

RubbelDieKatz Over a year ago

This doesn't appear to be working properly with the newest version of DataTables. Maybe the plugin hasn't been updated.

unqualified Over a year ago

fnFindCellRowIndexes is legacy and does not work with the latest datatables version, and is no longer recommended. See here: datatables.net/forums/discussion/27249/…

joshstrike · Accepted Answer · 2019-05-21 00:40:42Z

I found the fnFindCellRowIndexes plugin to be unbelievably slow, because it calls fnGetData on every cell, which itself is a terrible CPU hog. The answer turns out to be a lot simpler, and orders of magnitude faster to run. The data() of every column, or the whole table, is already ordered by the sorted column when you request it. So literally, all you have to do is request column(c).data() and iterate through that array looking for whatever you're looking for, and the indexes will match the row number as currently sorted. In Typescript this is basically like:

public findRows(s:string,col:number):number[] {
    let r:number[] = [];
    let dat:any = $('#example').DataTable().column(col).data();
    let len:number = dat.length;
    for (let k=0;k < len;k++) {
        if ((<string>dat[k]).toLowerCase().includes(s.toLowerCase())) r.push(k);
    }
    return r;
}

Collectives™ on Stack Overflow

How to find a specific row by values in jQuery datatables?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related