JQuery DataTables mRender – how do I get the row ID?

With the JQuery DataTables plugin I am using mRender to add buttons to my dynamically added rows. This part works great, but how can I get the rowID of the current row the buttons are added to? I need this to create unique IDs for the buttons.

What do I need to use in place of ???? in the code below?

JavaScript:

    $('#example').dataTable({
        "aoColumns": [
        { "sTitle": "Person", "mData": "Person" },
        {
            "sTitle": "Buttons", "mData": "Buttons", "mRender": function () {
                var rowID = ?????;
                btnD = '<button id="btnDepth' + rowID + '" data-keyindex="' + rowID + '" data-type="Depth" data-action="Show" class="addDepthGraph" title="Show Depth">D</button>';
                btnG = '<button id="btnGraph' + rowID + '" data-keyindex="' + rowID + '" data-type="Graph"  data-action="Show" class="addDepthGraph" title="Show Graph">G</button>';

                var returnButton = btnD + btnG;
                return returnButton;
            }
        }
        ],
        "bPaginate": false
    });

    $("#addRowOptions").click(function () {
        rowindex = $('#example').dataTable().fnGetData().length;
        obj = [{Person:'PersonA', Buttons: ''}];
        $('#example').dataTable().fnAddData(obj);
    });

jQuery DataTables plugin: Make specific row bold

I’m using the JQuery DataTables plugin found here. I’d like to make a specific row bold (a Totals row). How can I do so? Right now I am trying to apply the CSS using mRender. I’ve tried fnRowCallback



jQuery DataTables: How do I add a row ID to each dynamically added row?

Summary I am using the great dataTables jQuery plugin from http://www.datatables.net. In my script, I am dynamically adding rows based on an event firing using fnAddData. Using fnRowCallback, I add in

DataTables mRender function with view model

I’m implement table as http://www.datatables.net/examples/api/form.html, but in javascript I can’t data-bind values from my viewmodel(vm) in mRender. With test render function work correctly. How

jQuery DataTables: How to get row index (or nNode) by row id of tr?

I have a dataTables <table id=myTable>. I would like to fnUpdate() and fnDestroy() my rows. every row has an id, eg: <tr id=16>. To fnUpdate()/fnDestroy() the appropriate <tr>, I

DataTables jquery identifying row ID

I am using DataTables and capturing am img click on either edit or delete icon’s. My problem is, I need to capture the row ID as well.. I tried putting the row ID in the href tag but npt able to extra

jQuery – datatables, how to get column id

How to get a column id in datatable plugin for jquery I need column id for the update in database.

How do I get updated row id in ZEND?

I use $table->update($data, $where); How do I get updated row id in ZEND? thanks.

DataTables JS – How can I filter the table using the mData value instead of the value of the mRender function?

I’m using a DataTable that has the following column: { sTitle: <?= $this->translate(‘page_type’) ?>, sName: name, sClass: capitalize, mData: type, mRender: function(data, type, full)

jQuery Datatables: How do I extract the row header titls?

EDIT: This only happens when I’m using sScrollX. — http://jsfiddle.net/4n3Hp/ — Unfortunately, it’s needed for this particular use case. As tabletools doesn’t work for me, due to its use of flash an

Is it possible to have a ‘mDataProp’ inside a ‘fnRender’ or’mRender’ function using datatables

I’m trying to do something like this in order to display values in my table: Is it possible? Sorry If i may have completely messed up. Im trying to understand datatables. aoColumns: [ {mRender: func

Answers

Okay, I’ve found a work around. Although this is not the perfect solution, it does work. I am now passing the total number of rows in the grid through to the mRender function as the rowID.

$('#example').dataTable({
    "aoColumns": [
    { "sTitle": "Person", "mData": "Person" },
    {
        "sTitle": "Buttons", "mData": "Buttons", "mRender": function (rowIndex) {
            alert(rowindex);
            btnD = '<button id="btnDepth' + rowindex + '" data-keyindex="' + rowindex + '" data-type="Depth" data-action="Show" class="addDepthGraph" title="Show Depth">D</button>';
            btnG = '<button id="btnGraph' + rowindex + '" data-keyindex="' + rowindex + '" data-type="Graph"  data-action="Show" class="addDepthGraph" title="Show Graph">G</button>';
            var returnButton = btnD + btnG;
            return returnButton;
        }
    }
    ],
    "bPaginate": false
});


$("#addRowOptions").click(function () {
    rowindex = $('#example').dataTable().fnGetData().length;
    obj = [{Person:'PersonA', Buttons: rowindex}];
    $('#example').dataTable().fnAddData(obj);
});

I would still like to know: Is it possible to get the current row index from within the mRender function? And how would one do that?

This page has exactly what you need if you’re using DT_RowId serverside

Code:

"mRender": function ( data, type, full ) {
                                    return '<a target="_blank" rel="nofollow" href="?action=student_report&studentUID='+ full.DT_RowId + '">' + data + '</a>';