jQuery DataTables - add jquery generated element with events to a table cell

Question

I'm using jQuery DataTables ( http://www.datatables.net ) to generate a table. I want to insert in certain cells(from a column) a jquery generated html element witch has some events attached to it. (onClick for example).

I was thinking about mRender but I found that I need to return a string instead of an object.

here is the code:

table.dataTable({
    "aoColumns": [{
        "mRender":function() {
            var element=$("<div></div>").on("click",function(){
                alert("do something");
            });
            return element;
        }
    },
    {"sWidth": "350px"}]
});

The code is not working because what I see rendered is

[Object]

I can get the html code of the element using jQuery.html() but then I will loose the events attached to the element.

Is there any solution? Is this a design flaw in DataTables or am I missing something?

dataTables uses innerHTML internally to render the markup passed in mRender, so passing a jQuery object is as far as I know not possible. — adeneo
– adeneo, Commented Sep 19, 2013 at 17:47
@adeneo thanks , I was afraid someone might say this. So the only solution is to re-write the rendering method to accept jquery object and not just string. Do you know what's the name of that method? — Doua Beri
– Doua Beri, Commented Sep 19, 2013 at 17:52

Gigo · Accepted Answer · 2013-09-20 02:57:35Z

5

You can insert placeholder elements via mRender or sDefaultContent and add the actual content and events during the fnRowCallback events. Something like this:

table.dataTable({
    "aoColumns": [{
        "sDefaultContent": '<div class="stuff"></div>'
        "sWidth": "350px"
    }],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        var element = $(nRow).find("div.stuff");
        // do stuff
        element.on("click",function() {
            alert("do something on row: " + iDisplayIndex);
        });
    }
});

answered Sep 20, 2013 at 2:57

Gigo

3,2743 gold badges32 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

jQuery DataTables - add jquery generated element with events to a table cell

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related