JQuery : Get data from Datatable except last row

Question

I'm facing a (relatively) simple problem with my web project.
I'm using Jquery and DataTables plugin to have a good looking and interactive table, here is the result so far :


_{(source: hostingpics.net)}

What I would like to do :
Clicking on any cell of the table would show an alert saying "You chosen the sequence Nameofsequence of ID idofsequence".
Here is what I have so far :

$("#table_sequences tbody tr").on('click', function(){
                    var message;
                    var colonneSelected = $('td', this);
                    var idSequenceChosen = $(colonneSelected[0]).text();
                    var nomSequenceChosen = $(colonneSelected[1]).text();
                    message = "You have chosen the "+nomSequenceChosen+" sequence with ID of "+idSequenceChosen;
                    alert(message)
                }); 

And it works, I have the alert displaying :

_{(source: hostingpics.net)}

The problem is :
I would like this feature to be activated on the table excepted on the last column of the table (in this case, it's the "Action" column).
According to some docs, I tried this :

$("#table_sequences td:not(:last-child)").on('click', function()
// Rest of same code as above

But the alert message won't show any content in the 2 variables. But, the last column won't show the popup as expected. I suspect something wrong in the selection of the cells.
Any idea ?
Thank you !

Answer 1

Updated:

$("#table_sequences td:not(:last-child)").on('click', function() is correct, but you have to replace var colonneSelected = $('td', this); with var colonneSelected = $(this).parent().find('td');

HTML

<table class="table table-bordered" id="table_sequences">
    <thead>
        <tr>
            <th class="epic_center_text_h col-sm-1">ID</th>
            <th class="epic_center_text_h col-sm-1">Nom</th>
            <th class="epic_center_text_h col-sm-1">Date</th>
            <th class="epic_center_text_h col-sm-1">Statut</th>
            <th class="epic_center_text_h col-sm-1">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center">12</td>
            <td class="text-center">Création des utilisateurs</td>
            <td class="text-center">2015-01-06</td>
            <td class="bg-danger text-center">Failed <i class="glyphicon glyphicon-minus-sign"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=12&action=restart">Restart <i
                        class="glyphicon glyphicon-refresh"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">07</td>
            <td class="text-center">Calcul de LA question</td>
            <td class="text-center">2015-01-06</td>
            <td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
            <td class="bg-danger text-center"><a href="/epic/sequence?id=07&action=stop">Stop <i
                        class="glyphicon glyphicon-stop"> </i></a> /
                <a href="/epic/sequence?id=07&action=pause"> Pause <i
                        class="glyphicon glyphicon-pause"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">05</td>
            <td class="text-center">Sauvegarde des données</td>
            <td class="text-center">2014-12-22</td>
            <td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
            <td class="bg-danger text-center"><a href="/epic/sequence?id=05&action=stop">Stop <i
                        class="glyphicon glyphicon-stop"> </i></a> /
                <a href="/epic/sequence?id=05&action=pause"> Pause <i
                        class="glyphicon glyphicon-pause"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">11</td>
            <td class="text-center">Nettoyage des fichiers</td>
            <td class="text-center">2014-09-24</td>
            <td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=11&action=resume">Resume <i
                        class="glyphicon glyphicon-play"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">01</td>
            <td class="text-center">Calcul Red Shift</td>
            <td class="text-center">2014-09-24</td>
            <td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
            <td class="bg-danger text-center"><a href="/epic/sequence?id=01&action=stop">Stop <i
                        class="glyphicon glyphicon-stop"> </i></a> /
                <a href="/epic/sequence?id=01&action=pause"> Pause <i
                        class="glyphicon glyphicon-pause"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">08</td>
            <td class="text-center">Refactorisation</td>
            <td class="text-center">2014-09-24</td>
            <td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=08&action=resume">Resume <i
                        class="glyphicon glyphicon-play"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">02</td>
            <td class="text-center">Calcul Dérive</td>
            <td class="text-center">2014-09-22</td>
            <td class="bg-danger text-center">Stopped <i class="glyphicon glyphicon-minus-sign"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=02&action=start">Start <i
                        class="glyphicon glyphicon-arrow-right"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">06</td>
            <td class="text-center">Envoi des données</td>
            <td class="text-center">2014-07-17</td>
            <td class="bg-danger text-center">Stopped <i class="glyphicon glyphicon-minus-sign"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=06&action=start">Start <i
                        class="glyphicon glyphicon-arrow-right"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">03</td>
            <td class="text-center">Calcul simple</td>
            <td class="text-center">2014-04-12</td>
            <td class="bg-info text-center">Paused <i class="glyphicon glyphicon-pause"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=03&action=resume">Resume <i
                        class="glyphicon glyphicon-play"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">04</td>
            <td class="text-center">Calcul Mental</td>
            <td class="text-center">2014-02-14</td>
            <td class="bg-danger text-center">Failed <i class="glyphicon glyphicon-minus-sign"></i></td>
            <td class="bg-success text-center"><a href="/epic/sequence?id=04&action=restart">Restart <i
                        class="glyphicon glyphicon-refresh"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">10</td>
            <td class="text-center">Ecriture du rapport</td>
            <td class="text-center">2014-02-03</td>
            <td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
            <td class="bg-danger text-center"><a href="/epic/sequence?id=10&action=stop">Stop <i
                        class="glyphicon glyphicon-stop"> </i></a> /
                <a href="/epic/sequence?id=10&action=pause"> Pause <i
                        class="glyphicon glyphicon-pause"></i></a></td>
        </tr>
        <tr>
            <td class="text-center">09</td>
            <td class="text-center">Cuisson de choucroute</td>
            <td class="text-center">2013-11-13</td>
            <td class="bg-success text-center" style="cursor: progress">Running <i class="glyphicon glyphicon-thumbs-up"></i></td>
            <td class="bg-danger text-center"><a href="/epic/sequence?id=09&action=stop">Stop <i
                        class="glyphicon glyphicon-stop"> </i></a> /
                <a href="/epic/sequence?id=09&action=pause"> Pause <i
                        class="glyphicon glyphicon-pause"></i></a></td>
        </tr>
    </tbody>
</table>

JS

$(document).ready(function() {
    $(document).on('click', "#table_sequences td:not(:last-child)", function() {
        var message;
        var colonneSelected = $(this).parent().find('td');
        var idSequenceChosen = $(colonneSelected[0]).text();
        var nomSequenceChosen = $(colonneSelected[1]).text();
        message = "You have chosen the " + nomSequenceChosen + " sequence with ID of " + idSequenceChosen;
        alert(message)
    });
});

Demo Link

Answer 2

Why not assign a class to all clickable cells and then assign click to these cells.

Like so:

    var oTable = $('#table_sequences').dataTable({
    "bServerSide": true,
    "sAjaxSource": "records.json",
    "sAjaxDataProp": "aaData",
    "bProcessing": true,
    "aoColumns": [{
      "mData": "id",
      "sWidth": "5%",
      "sClass": "clickable"
    }, {
      "mData": "title",
      "sClass": "clickable"
    }, {
      "mData": null,
      mRender: function(data, type, full) {
        return '<button>Click me</button>'
      }
    }],
    "fnInitComplete": function(oSettings) {
      $(".clickable").on('click', function() {
        var message;
        var idSequenceChosen = this.parentElement.cells[0].textContent;
        var nomSequenceChosen = this.parentElement.cells[1].textContent;
        message = "You have chosen the " + nomSequenceChosen + " sequence with ID of " + idSequenceChosen;
        alert(message)
      });
    }
    })

Try this Plunker