Search code examples
jquerydatatablescellalertselection

JQuery : Get data from Datatable except last row


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 :

Heberger image
(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 :
Hebergeur d'image
(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 !


Solution

  • 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