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

Question

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

score 3 · Accepted Answer · answered Apr 23 '13 at 07:50

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?

score 3 · Answer 2 · answered Oct 04 '13 at 10:22

3

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

Code:

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

answered Oct 04 '13 at 10:22

Marc

1,541
2
19
29

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

2 Answers2