Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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');

            }
        });
    });
like image 334
nhaberl Avatar asked Jul 15 '16 09:07

nhaberl


2 Answers

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.

like image 67
Gyrocode.com Avatar answered Dec 02 '22 15:12

Gyrocode.com


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;
}
like image 20
joshstrike Avatar answered Dec 02 '22 15:12

joshstrike