Datatable Click Row

ghafariz

Hello, i want t ask about how to get data from row that clicked
i know that using $(.datatable).on('click') is the default, but here is a little bit tricky

in my project, there is 10 different table in one page, therefore I need to show it all. to make my code shorter, I call the ajax function for datatables inside a loop for how many table I have, this is the code

function getContent(userIndex) {
    var users = [];
    var count = 0;
    $(".contentitem").each(function(){
        count++;
        users.push($(this).attr("id"));
    });

    $(".loading").find(".percentage").html("<h1>" + Math.round(userIndex / count * 100) + "%</h1>");
    $(".loading").find(".slide").css("width", Math.round(userIndex / count * 100) + "%");

    if (users.length == userIndex) {
        $(".loading").delay(1000).fadeOut(1000);
        return;
    }

    var user = users[userIndex];

    $.ajax({
        url: "/data/content",
        type: "POST",
        data: {"item": user},
        success: function(data) {
            $("#" + user).html(data);
        },
        error: function() {
            getContent(++userIndex);
        },
        complete: function() {
            var id = $("#" + user).find("table").attr("id");
            var tableid = (id === "tabeleditstatus") ? 'tabeluser' : id;
            if (tableid !== undefined) {
                if ($("#" + user).find(".tab-content").length == 1) {
                    $("#" + user + " .tab-pane").each(function(){ 
                        var temp = $(this).find("table").attr("id");
                        if (temp !== undefined) {
                            $("#" + temp).DataTable({
                              "processing": true,
                              "serverSide": true,
                              "autoWidth": false,
                              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                              "ajax": {
                                url: '/data/table',
                                data: {db: temp.replace("tabel", "")},
                                type: 'POST'
                              }
                            });
                        }
                    })
                    getContent(++userIndex);
                } else {
                    $("#" + tableid).DataTable({
                      "processing": true,
                      "serverSide": true,
                      "autoWidth": false,
                      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                      "ajax": {
                        url: '/data/table',
                        data: {db: tableid.replace("tabel", "")},
                        type: 'POST',
                        complete: function(){
                            getContent(++userIndex);
                        }
                      }
                    });
                }
            } else getContent(++userIndex);
        }
    });
}

i already tried the .datatable click, not working, I tried to change the selector to the table's id, but its not working too. so I check using inspector (firefox) turns out datatable wrap all the table into new ones. any solution?

colin

You could add this into your success function,

  $('#example tbody').on('click', 'tr', function() {
    console.log('clicked: ' + table.row(this).data()[0])
  })

with the table ID it means it will be unique for each table. See example here: http://live.datatables.net/voreyapa/1/edit

Colin

ghafariz

thanks for the feedback colin, so the click function inside the loop?

allan

No - Colin give you a delegated event handler there, so you'd just want to call it once.

See this example for a running example (in addition to Colin's).

Allan