在jQuery Datatable中選擇一行時如何檢測空表

Question

給這樣一個簡單的表

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

同樣，使用jQuery Datatable插件並使行可以選擇，如本示例所示 。 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');
        }
    } );

因此，當表為空時，它將顯示一個可選擇的行，其內容類似於：

表中無可用數據

如何檢測表是否為空，並且不允許在這種“消息行”上進行選擇？

這是代碼的擺弄 。

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()方法查看是否有數據。 如果返回未定義，則可以禁用該行的選擇。

我還認為這將是一個理想的解決方案，而不是更昂貴的dom遍歷。 你們有什么感想 ？

以下是更新的小提琴。 您可以通過html注釋tbody以對其進行測試。

讓我知道是否有幫助。

改良的小提琴

Answer 3

在點擊方法中，在所有內容之前添加

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