jQuery: Bind an onClick Event to an Item in a DataTables Row CodeUnit 14 MAY 2010

As it has quickly become apparent on this site, my two current favourites in the land of web development is the fantastic jQuery javascript library and the brilliant jQuery-based DataTables plugin that gives you instant dynamic table features applied to any bog standard HTML table.

The problem that I’m solving today arose from my desire to include a positive/negative flagging system to data being displayed in a DataTables view. So in each data row I added a column that contained both a greyed out happy and sad smiley face, on which the user will be able to click in order to color the appropriate face and thus indicate a state for that particular row of data.

The idea is simple enough. Click on the smiley face and the script will then fire off an ajax post to a script handler which will fiddle in the database and return the correct state which in turn changes the image accordingly – pretty standard AJAX stuff in other words.

However, herein lay the problem.

Because the DataTables was being fed through a server-side script, in other words the actual table data is loaded by the DataTables plugin itself, my jQuery function that was supposed to interact with the clicking of a smiley face couldn’t work because the elements it was meant to interact with simply didn’t exist when the page’s initial DOM tree was being loaded.

So how to solve this?

Well the solution obviously lies in binding the newly created elements to my existing click handler function, but the question remains – how exactly does one do this if the table data is being loaded through a jQuery function?

Well the answer lies with the DataTables-provided callback function entitled fnDrawCallback, which is called on every ‘draw’ event – in other words the perfect little hook to attach your jQuery code, which is to interact with the DataTables-loaded DOM data, to.

So how does one use this callback functionality then? Well the magic all gets stuffed into the DataTables constructor function. First, we declare the function that is to be run on the click event happening. Then, we bind this function to the click event for the desired elements in the standard jQuery manner. And then for the crucial point, this binding is done as part of the fnDrawCallback declaration in your dataTable constructor call.

So let’s see this in action:

//onClick handler function
function flagsmileysadclick()

//DataTables constructor
oTable = $('#commentstable').dataTable({
"bProcessing": true,
"bServerSide": true,
"iDisplayLength": 50,
"bLengthChange": false,
"sAjaxSource": "datatables_comments_list.php",
"sPaginationType": "full_numbers",
"aaSorting": [[ 0, "desc" ]],
"fnDrawCallback": function() {
  //bind the click handler script to the newly created elements held in the table

And that’s actually it. Simple, but effective, and a nice introduction to the handy fnDrawCallback feature of DataTables.

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • Pingback: Searching For The Right Car Stereo » Car Stereo Bluetooth()

  • Seriously man, I was looking for just this solution. I have a data table that I want to use a jquery checkbox function with and I've been beating my head against the wall trying to figure out how to do this.

    Excellent example.

  • Glad I could help Eric. Seriously, datatables is just such a brilliant little plugin that the guys at jQuery really start bringing it into the core! :)

  • Taj360

    Hi, I can’t seem to get the id, any chance you post full code?

  • Chh

    It’s that what I need

    • Excellent :)

      • Charles

        hi Craig,

      • Charles

        hi craig,
        I read about Fncallback..but I want to ask you about Datatables in show/hide details on a particular record. I did all the example that Allan has in this site. But no success..
        I want you to read this and tell me about the steps to do the code right. I have some question that I think can help me to do a light..
        1. sajaxSouce :”server_processing_details_col.php has the Echo $output
        Do I have to replace aaData[] into there?
        2. I use Datatables 1.7.5

        here is the discussion that

        mine is carlotor , there my code , in html -client- and in php
        february 28 /2011
        thanks in adavance if you decide to review this .

  • pwmusic

    You’re an absolute star!

    Thanks very much for posting.

  • Jess

    Can i ask how you managed to put the view link on each row when the data came from an external source?



  • Test


  • Hi,

    Recently I started using jQuery DataTables plugin.

    Now, I’m in the middle of an issue, maybe you can solve, hope you have time.

    I’m attaching a context menu, with the jQuery Context Menu plugin, to every row in the table.

    The issue I’m having now, is that only the view-able rows are working. I mean, that pagination don’t let me attach this context menu to every row. Just the one that are visible when table is created.

    Do you know how to solve this?

    A little example if you have one will help.

    Thanks in advance. 

  • Wu4m4n

    Muchas gracias!
    Or you try this.

    Js :
    $(“#TablaSolicitudTransportes”).delegate(“tbody tr td a.addbultos”, “click”, function (event) {



    Html : Table



    Saludos !

  • IB

    Thank you so much! This is EXACTLY what I needed to know :)

  • Sahar

    You made my day!!!!
    Thank you sooooo much

  • Periyasamy

    i am using the pagination function on a datatable with check box and jquery with event “onchange” for every check box. when i am on first page everything is ok.. but when i go to other pages the “onchange” event lefts to work.. how to solve this? I need exact solution for this problem with examples.

  • pogi

    This is exactly what I need :)

  • MJMZ

    TQVM, Problem solved. Thanks for sharing the valuable info.