仅显示选定的行
数据表通常有一个复选框来选择多行。如果数据分布在多个页面上,则用户可能难以查看他选择的记录。为了使用户能够一次查看所有选定的记录,我们通常使用一个超链接,单击该链接时仅显示数据表中的选定行。此链接可用于在查看所选记录和所有记录之间切换。
$(sAnchor).click(function() {
$('#show_selected').text(function(_,txt) {
var checked = 0;
var ret='';
var dataTable = $("#report_table").dataTable();
if ( txt == 'Show Selected Reports' ) {
dataTable.fnFilter('Checked',8);
ret = 'Show All Reports';
}else{
dataTable.fnFilter('',8);
ret = 'Show Selected Reports';
}
return ret;
});
});
在上面的方法中,单击 Select All 超链接,如果超链接 div 文本是’Show Selected Reports’,我们过滤数据表以仅显示为其选中复选框的行。我们使用内置的 Datatables API 函数 fnFilter 。
我们将 2 个参数传递给此方法 - 查询字符串和要过滤的列的索引。在这种情况下,如果在 UI 上选中它并且包含复选框的列的索引是 8,则复选框的值将为 ‘Checked’ 。因此,我们将’Checked’和 8 作为 pamaeters 传递给 fnFilter 函数。过滤后,我们切换链接以显示显示所有报告。
当用户单击显示所有报告时,我们将空字符串作为查询字符串传递给 fnFilter 函数。所以它显示所有记录。