在jQuery Datatable中选择一行时如何检测空表答案

【问题标题】：How to detect empty table when selecting a row in a jQuery Datatable在jQuery Datatable中选择一行时如何检测空表
【发布时间】：2023-03-26 12:00:01
【问题描述】：

给一个这样的简单表格

<table id="exampleTable" class="table hover nowrap">
   <thead>
      <tr>
         <th>Id</th>
         <th>Name</th>
      </tr>
   </thead></table>

另外，使用jQuery Datatable plugin 并使行可选择，例如this example。 Javascript 是这样的：

var exampleTable = $("#exampleTable").DataTable(
                    {
                        "bDestroy": true,
                        "lengthChange": false,
                        "bPaginate": false
                    });

$('#exampleTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            $('#exampleTable tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );

因此，当表格为空时，它会显示一个可选择的行，内容如下：

表格中没有可用数据

如何检测表为空且不允许选择那种“消息行”？

Here is a fiddle 带有代码。

【问题讨论】：

没有数据时要隐藏表格吗？
但是当我只有一行时会发生什么？ @Murali 不，我想禁用“无数据”行上的选择。

标签： javascript jquery datatables

【解决方案1】：

您可以像这样检查是否有带有类 dataTables_empty 的 td：

$('#exampleTable tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected')) {
            $(this).removeClass('selected');
        }
        else if(! $(this).find('td.dataTables_empty').length){
            $('#exampleTable').DataTable().rows().nodes().each(function(){
               $(this).removeClass('selected');
            });
            $(this).addClass('selected');
        }
    } );

【讨论】：

是的，我在考虑这种可能性，但我希望找到一种“更清洁”的方式来做到这一点。
对我来说看起来很干净 :)，我不知道您还会如何检查是否有条目？也许Datatable提供了一些回调函数，你可以查看它
这正是我所希望的 :)
我已经更新了你的答案，因为也有必要从隐藏行中删除 selected 类。

【解决方案2】：

可以使用-.row().data()方法查看是否有数据。如果这返回未定义，您可以禁用行的选择。

我也认为这将是一个理想的解决方案，而不是更昂贵的 dom 遍历。你们有什么感想？

下面是更新的小提琴。你可以从 html 中评论 tbody 来测试它。

如果这有帮助，请告诉我。

Modified Fiddle

【讨论】：

它不起作用。只要用一些随机字母进行搜索，您会看到“未找到匹配记录”行仍然可以选择。
对此感到抱歉。没有考虑过这种情况。从 api 文档中我发现添加了两个资源用于 select 不需要额外的逻辑。只是一个启用选择的选项。即“选择：真”。这是更新的小提琴。 jsfiddle.net/vje9e2sL 。请检查小提琴中的资源以获取所需的 css 和 js 文件。
“选择”上的选项不是强制性的。它只是如果你想做额外的处理。所以如果不需要请忽略。
是的，我看到了，但是我需要在select事件中做更多的事情，所以我需要处理它。

【解决方案3】：

在您的点击方法中，在所有内容之前添加

if($('#exampleTable tbody tr td').length == 1){
      return;
    }

【讨论】：

这将禁用选择始终只有一行，即使该行是有效记录。
所以请检查td（我已更新），因为您的“无消息”行只有一个td（假设您的数据表数据有多个td）应该作为预计