从JavaScript源数据表中获取过滤的数据数组

My dataTable version is 1.10.4. I'm populating the datatable by passing the Javascript sourced data

我的dataTable版本是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" }
    ]
} );

} );

Now I have a search input to filter the table based on the input. I'm trying to get the filtered data that returns and rendering in the table.

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

For example, If the users search input is 'C' then i should get filtered data

例如,如果用户搜索输入为“C”,那么我应该获得过滤数据

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

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

Is there any standard way of getting filtered data in datatable?

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

if not i want to get the array on key up

如果不是我想让键盘上的阵列

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

Please refer to JSFIDDLE HERE

请参考这里的JSFIDDLE

2 个解决方案

#1

You can use the search.dt event for this (here assuming you have stored the instance of the dataTable in a table variable) :

您可以使用search.dt事件(这里假设您已将dataTable的实例存储在表变量中):

$("#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]);
    };    
});

This will echo all the filtered rows out in the console in the same order as they are declared in your dataSet object :

这将在控制台中以与在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"]

etc. Note, if you instantiate your table with DataTable() instead of dataTable() you will not need the api() reference.

请注意,如果使用DataTable()而不是dataTable()实例化表,则不需要api()引用。

forked fiddle -> http://jsfiddle.net/fpbokb68/

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

see https://datatables.net/reference/type/selector-modifier with examples of different ways to extract rows out of a dataTables instance.

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

#2

This is an example search for you; you can delete button and add onchange to your area.

这是您的示例搜索;你可以删除按钮并在你的区域添加onchange。

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

This is function;

这是功能;

     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
    }

Note: You have to update your table. Here EXAMPLE.

注意:您必须更新表格。这里的例子。

#1