【问题标题】:JQuery : Get data from Datatable except last rowJQuery:从数据表中获取数据,除了最后一行
【发布时间】:2019-09-15 23:11:26
【问题描述】:

我的网络项目面临一个(相对)简单的问题。
我正在使用 Jquery 和 DataTables 插件来制作一个漂亮的交互式表格,这是目前为止的结果:


(来源:hostingpics.net

我想做什么:
单击表格的任何单元格都会显示一条警告,提示“您选择了 ID idofsequence 的序列 Nameofsequence”。
这是我到目前为止所拥有的:

$("#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)
                }); 

它有效,我有警报显示:

(来源:hostingpics.net


问题是:
我希望在表格的最后一列excepted上激活此功能(在本例中,它是“操作”列)。
根据一些文档,我试过这个:

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

但警报消息不会显示 2 个变量中的任何内容。但是,最后一列不会按预期显示弹出窗口。我怀疑单元格的选择有问题。
有什么想法吗?
谢谢!

【问题讨论】:

    标签: jquery datatables cell alert selection


    【解决方案1】:

    更新:

    $("#table_sequences td:not(:last-child)").on('click', function() 是正确的,但你必须将var colonneSelected = $('td', this); 替换为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

    【讨论】:

    • 感谢您的回答,但不幸的是,警报仍显示在最后一列。但是当我点击最后一个 line (根据屏幕截图它是 ID 04 的行)时,它不会弹出。
    • 这意味着最后一个column不在同一个table,在回答中添加了演示链接jsfiddle.net/manoj_admlab/XjbqT/1
    • 嗯,这很奇怪,因为我确定我的最后一列确实在表格中。这是表格的 HTML 输出:pastebin.com/n6AWhcqx
    • @ManojYadav:很抱歉打断你。当然你是对的,但我认为 OP 正在寻求关于 dataTables jQuery 插件的帮助。不是 HTML 表格。看这里:datatables.net
    • @Frankynov $(document).on('click', "#table_sequences td:not(:last-child)", function() { 被添加到答案和演示链接jsfiddle.net/manoj_admlab/XjbqT/6
    【解决方案2】:

    为什么不给所有可点击的单元格分配一个类,然后将点击分配给这些单元格。

    像这样:

        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)
          });
        }
        })
    

    试试这个Plunker

    【讨论】:

      猜你喜欢
      • 2013-07-29
      • 1970-01-01
      • 1970-01-01
      • 2021-03-09
      • 1970-01-01
      • 2022-06-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多