从 JavaScript 来源的数据表中获取过滤后的数据数组答案

【问题标题】：Get the filtered Data array from JavaScript sourced Data table从 JavaScript 来源的数据表中获取过滤后的数据数组
【发布时间】：2015-07-07 06:01:25
【问题描述】：

我的数据表版本是 1.10.4。我通过传递 Javascript 源数据来填充数据表

var dataSet = [
    ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
    ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C']
    //----
];



$(document).ready(function () {
    $('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');

    $('#example').dataTable({
        "data": dataSet,
        "columns": [
            { "title": "Engine" },
            { "title": "Browser" },
            { "title": "Platform" },
            { "title": "Version", "class": "center" },
            { "title": "Grade", "class": "center" }
        ]
    });
});

现在我有一个搜索输入来根据输入过滤表格。我正在尝试获取返回并在表中呈现的过滤数据。

例如，如果用户搜索输入是“C”，那么我应该得到过滤后的数据

var 数据集 = [ ['Trident','Internet Explorer 5.0','Win 95+','5','C'] ];

是否有任何标准方法可以在数据表中获取过滤后的数据？

如果不是，我想在键上获取数组

$( "#searchInput").on( 'keyup change', function () {
    // get the filtered JavaScript data
});

请参考JSFIDDLE HERE

【问题讨论】：

标签： javascript jquery datatable datatables

【解决方案1】：

您可以为此使用search.dt 事件（这里假设您已将dataTable 的实例存储在table 变量中）：

$("#example").on('search.dt', function() {
    var filteredRows = table
                       .api()
                       .rows( {order:'index', search:'applied'} )
                       .data();

    for (var i=0; i<filteredRows.length; i++) {
        console.log(filteredRows[i]);
    };    
});

这将在控制台中以与dataSet 对象中声明的顺序相同的顺序回显所有过滤后的行：

["Gecko", "Firefox 3.0", "Win 2k+ / OSX.3+", "1.9", "A"]
["Gecko", "Camino 1.0", "OSX.2+", "1.8", "A"]
["Gecko", "Camino 1.5", "OSX.3+", "1.8", "A"]
["Gecko", "Netscape 7.2", "Win 95+ / Mac OS 8.6-9.2", "1.7", "A"]

等等。注意，如果您使用 DataTable() 而不是 dataTable() 来实例化您的表，您将不需要 api() 引用。

分叉小提琴 -> http://jsfiddle.net/fpbokb68/

请参阅 https://datatables.net/reference/type/selector-modifier，了解从 dataTables 实例中提取行的不同方法示例。

【讨论】：

【解决方案2】：

这是为您提供的示例搜索；您可以删除按钮并将 onchange 添加到您的区域。

Search <input type="text" id="searchText">
<input type = "button" onClick="searchAndUpdate()">

这是函数；

     function searchAndUpdate(){
        var searchText = $('#searchText').val();
        var resultTable = [];
        dataSet.forEach(function(element) {
            var objString = JSON.stringify(element);
            if(objString.indexOf(searchText)!=-1){
                resultTable.push(element);
            }
        });
        console.log(resultTable);

        //update your table
    }

注意：您必须更新您的表格。 Here EXAMPLE.

【讨论】：