仅显示选定的行

数据表通常有一个复选框来选择多行。如果数据分布在多个页面上,则用户可能难以查看他选择的记录。为了使用户能够一次查看所有选定的记录,我们通常使用一个超链接,单击该链接时仅显示数据表中的选定行。此链接可用于在查看所选记录和所有记录之间切换。

$(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 函数。所以它显示所有记录。