Javascript 在jQuery数据表中选择行时如何检测空表

给我一张这样简单的桌子

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

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

表中没有可用的数据

如何检测表是空的，并且不允许对这种“消息行”进行选择

---

使用代码。

您可以检查是否存在类dataTables\u为空的td，如下所示：

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

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

---

您可以检查是否存在类dataTables_为空的td，如下所示：

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

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

---

在单击方法中，在所有内容之前添加

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

---

在单击方法中，在所有内容之前添加

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

---

您可以使用-

.row（）.data（）

方法查看是否存在数据。如果返回undefined，则可以禁用行选择

我还认为这将是一个理想的解决方案，而不是更昂贵的dom遍历。你们觉得怎么样

下面是最新的提琴。您可以从html中注释tbody来测试它

让我知道这是否有帮助

---

您可以使用-

.row（）.data（）

方法查看是否有数据。如果返回undefined，则可以禁用行选择

我还认为这将是一个理想的解决方案，而不是更昂贵的dom遍历。你们觉得怎么样

下面是最新的提琴。您可以从html中注释tbody来测试它

让我知道这是否有帮助

---

---

当没有数据时是否要隐藏表？但当我只有一行时会发生什么@Murali不，我想禁用“无数据”行上的选择。当没有数据时是否要隐藏表？但当我只有一行时会发生什么@Murali不，我想禁用“无数据”行上的选择。是的，我考虑过这种可能性，但我希望找到一种“更干净”的方法。看起来对我来说足够干净：），我不知道你还能如何检查是否有条目？也许Datatable提供了一些回调函数，您可以在其中检查它，这正是我所希望的：）我已经更新了您的答案，因为也有必要从隐藏行中删除

所选的

类。是的，我考虑过这种可能性，但我希望找到一种“更干净”的方法。看起来对我来说足够干净：），我不知道你还能怎么检查有没有条目？也许Datatable提供了一些回调函数，您可以在其中检查它，这正是我所希望的：）我已经更新了您的答案，因为有必要从隐藏行中删除

所选的

类。这将禁用选择始终只有一行，即使该行是有效记录。请检查

td

（我已更新），因为您的“无消息”行只有一个

td

（假设您的datatable数据有多个

td

）应按预期工作。这将禁用选择始终只有一行，即使该行是有效记录。请检查

td

（我已更新），因为您的“无消息”行只有一个

td

（假设您的datatable数据有多个

td

），因为expectedIt不起作用。只需使用一些随机字母进行搜索，您将看到“未找到匹配记录”行仍然是可选择的。对此表示抱歉。我没有考虑过这种情况。从api文档中，我发现为select添加了两个资源，不需要额外的逻辑。只是一个启用选择的选项。i、 e“选择：真”。这是最新的小提琴。请查看fiddle中的资源以获取所需的css和js文件。选择不是必需的。这只是如果你想做额外的处理。因此，如果不是必需的，请忽略。是的，我已经看到了，但是我需要在select事件中做更多的事情，所以我需要处理它。它不起作用。只需使用一些随机字母进行搜索，您将看到“未找到匹配记录”行仍然是可选择的。对此表示抱歉。我没有考虑过这种情况。从api文档中，我发现为select添加了两个资源，不需要额外的逻辑。只是一个启用选择的选项。i、 e“选择：真”。这是最新的小提琴。请查看fiddle中的资源以获取所需的css和js文件。选择不是必需的。这只是如果你想做额外的处理。因此，如果不需要，请忽略。是的，我已经看到了，但我需要在select事件中做更多的事情，所以我需要处理它。