fnDrawCallback how to include name of the input along with the value

YoDavish

I'm able to get an array object of values from the table when I click on a row, however, now I need the names to be included in the array. So rather than

array[0: "38", 1: "90000", 2: "G55555"]

I need:

array[id: "38", zipcode: "90000", number: "G55555"]

Hopefully, this bit of code makes sense below since I believe it's the "rawData = table.row( this ).data();" that fetches (Line 6 below) the data from the table.

$('#tableId').DataTable( {
            data: refreshedData,
            "fnDrawCallback": function( oSettings ) {
                $('#tableId').on( 'click', 'tr', function () {
                    var table = $('#tableId').DataTable();
                    **var rawData = table.row( this ).data();**
                    showQueueDeficiency(rawData);
                });
            },
            columns: colNames,
            responsive: true,
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets":  [  8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ],
                    "visible": false,
                    "searchable" : false
                }
            ]
        });

colin

Hi @YoDavish ,

The drawCallback is a bad place for an event handler - as you'll be creating fresh events on every draw. You only need that once, either in the initComplete or just after the table initialisation.

Regarding the names in the array, that's an object. As you haven't declared the table as object based (you are using arrays) you'll need to handcraft that with the output from row().data(),

Cheers,

Colin

YoDavish

Hello colin,

I'm still new to this stuff, based on what I've read I think the code would look like this (haven't handcrafted the out yet:

$('#tableId').DataTable( {
            data: refreshedData,
            "fnDrawCallback": function( oSettings ) {
            },
            columns: colNames,
            responsive: true,
            "columnDefs": [
                {
                    "targets":  [ 0 ],
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets":  [  8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ],
                    "visible": false,
                    "searchable" : false
                }
            ],
            "initComplete": function(settings, json) {
                $('#tableId').on( 'click', 'tr', function () {
                    var table = $('#tableId').DataTable();
                    alert( 'DataTables has finished its initialisation.' );
                    var rawData = table.row( this ).data();
                    showQueueDeficiency(rawData);
                });
            }
        });


],