Get the filtered Data array from JavaScript sourced Data table

Question

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

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

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

davidkonrad · Accepted Answer · 2015-04-28 13:53:32Z

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

$("#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 :

["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.

forked fiddle -> 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.

hurricane · Accepted Answer · 2015-04-28 12:32:12Z

0

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

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.

answered Apr 28, 2015 at 12:32

hurricane

6,7342 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

Get the filtered Data array from JavaScript sourced Data table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related