jQuery DataTables：如何在单击行按钮时抑制行详细信息模态？

Question

我有一个数据表，按下<tr>时它会得到值，并显示每行的详细信息，但是我有3个最后的列带有按钮，每当我按下一个按钮以显示Bootstrap的模式时向我显示了该行的详细信息，我必须关闭该模式以查看按钮的模式

我试图以不同的方式获取列的值，但是我在Internet上找到的值选择了td，然后从那里获得了索引，但是我的click事件来自<tr> ，因此出现了问题

$('#mobis_table tbody').on('click', 'tr', function() {
  var col = $(this).find('td')
  for (var i = 0; i < col.length; i++) {
    console.log(col[i]._DT_CellIndex.column)
  }

  if (col <= 9) {

    var data = table.row(this).data();
    var id = data.id
    $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      }
    });
});

我只想知道选择了哪一列，以避免在用户单击最后3列的按钮时显示详细信息。

Answer 1

与this一起使用index() 。 使用find和length来获得tr总长度，如下所示。 获得总长度后，您可以借助index轻松地找到它们是否为最后3个。

 $('#mobis_table').on('click', 'tr', function() { var len = $('#mobis_table').find('tr').length; // You can get total tr length here and add your logic for last 3 columns. var num = $(this).index(); console.log(num); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id='mobis_table'> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>

或者，如果您单击td并希望tr索引使用closest() ：

$(this).closest("tr").index();

Answer 2

据我所知，您的问题是：单击表行中的按钮时，单击事件会使您的DOM触发该行的DOM单击事件（显示行详细信息）。 如果是这种情况，您可以在按钮单击处理程序中简单地执行event.stopPropagation() ：

 //random source data const srcData = [ {item: 'apple', cat: 'fruit'}, {item: 'pear', cat: 'fruit'}, {item: 'cucumber', cat: 'vegie'} ]; //initialize datatables const table = $('#example').DataTable({ data: srcData, dom: 't', columns: ['item', 'cat'].map(header => ({title: header, data: header})), columnDefs: [{targets: 1, render: data => data+'<button class="good">Good button</button><button class="bad">Bad button</button>'}] }); //emulate row click handler to display row details $('#example').on('click', 'tr', function(){ const rowDetails = table.row(this).data(); console.log(rowDetails); }); //BAD button click handler $('#example').on('click', '.bad', function(){ console.log('Bad button was clicked'); }); //GOOD button click handler $('#example').on('click', '.good', function(event){ event.stopPropagation(); console.log('Good button was clicked'); });

 tbody button { display: block; float: right; margin: 5px; }

 <!doctype html> <html> <head> <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> </head> <body> <table id="example"></table> </body> </html>

Answer 3

首先，我必须从tr的click事件中删除tbody，以便即使按下按钮也将覆盖该事件。

$('#mobis_table').on('click', 'tr', function () {

然后只需添加event.stopPropagation（）; 在我按钮的功能上

$("#mobis_table").on('click', '.move-mobi', function(event){
  event.preventDefault();
  event.stopPropagation();

jQuery DataTables：如何在单击行按钮时抑制行详细信息模态？

问题描述

3 个解决方案

解决方案1
0 2019-06-27 04:09:38

解决方案2
0 已采纳 2019-06-27 07:02:27

解决方案3
0 2019-06-27 17:55:27

jQuery DataTables：如何在单击行按钮时抑制行详细信息模态？

问题描述

3 个解决方案

解决方案1 0 2019-06-27 04:09:38

解决方案2 0 已采纳 2019-06-27 07:02:27

解决方案3 0 2019-06-27 17:55:27

解决方案1
0 2019-06-27 04:09:38

解决方案2
0 已采纳 2019-06-27 07:02:27

解决方案3
0 2019-06-27 17:55:27