Question

给出一个这样的简单表格

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

因此，当表为空时，它会显示一个可选择的行，其中包含：

表格中没有数据

如何检测表是空的，不允许选择那种＆＃34;消息行＆＃34;？

带代码的

Here is a fiddle。

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

Answer 2

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

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

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

如果有帮助，请告诉我。

Modified Fiddle

Answer 3

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

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

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

3 个答案: