隱藏行與我使用<a href="https://datatables.net" rel="nofollow">jQuery datatables</a>類「隱藏」的變化複選框

Question

後。我想用class="hidden"隱藏所有行。

此代碼：

var table = $('#table1').DataTable(); 
table.rows('.hidden').hide(); 

它不工作（行不隱藏），而我看到這個文本控制檯：

table.rows（...）隱藏不功能

如何使用class="hidden"隱藏所有行？

---

HTML代碼：

<tr class=""> 
    <td>1</td> 
    <td>ABC</td> 
    <td>17</td> 
</tr> 

<tr class="hidden"> 
    <td>2</td> 
    <td>DEF</td> 
    <td>22</td> 
</tr> 

<tr class=""> 
    <td>3</td> 
    <td>GHI</td> 
    <td>55</td> 
</tr> 

<tr class="hidden"> 
    <td>4</td> 
    <td>JKL</td> 
    <td>11</td> 
</tr> 
<input id="hideRows" name="hideRows" type="checkbox"> 

JS代碼：

$('#table1').DataTable(); 

$('#hideRows').change(function() 
{ 
    var table = $('#table1').DataTable(); 
    $('tr.hidden').hide(); 
    $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) { 
     if ($(oSettings.nTable).hasClass('hidden')) { 
      return aData[16] == '' || $('#hideRows').is(':checked'); 
     } else return true; 
    }); 
    table.draw(); 
}); 

Answer 1

以下解決方案假定行已經被打上了hidden類。

要使用數據表中篩選隱藏行，實現過濾功能，如：

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) { 
     return $(table.row(dataIndex).node()).hasClass('hidden'); 
    } 
); 

雖然我們並不建議你可以使用jQuery來隱藏行，但也有陷阱 。 （還有，你可能需要做這個正當的理由，但他們不會在這裏介紹。）簡單查詢hidden類的HTML使用常規jQuery選擇tr元素，然後應用.hide()，像這樣：

$('tr.hidden').hide(); 

如果使用非濾波函數來隱藏行（使用上述的jQuery方法，或與上hidden類CSS樣式），可能存在的副作用。有關更多信息，請參閱jQuery DataTable - Hide rows the intended way。如果顯示/過濾問題，你必須讓數據表知道哪些行已經被隱藏：

$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) { 
    if ($(oSettings.nTable).hasClass('hidden')) { 
     return aData[16] == '' || $('#chkShowExcluded').is(':checked'); 
    } else return true; 
}); 

注意，使用任何這些方法後，您可能必須強制重繪應用hidden班後到表格行，像這樣：

table.draw();