How to get searched or filtered data?

How to get searched or filtered data?

akibarakibar Posts: 2Questions: 0Answers: 0
edited May 2009 in General
Hi,

I just find this great tool and have a question. I have a table with filter and search inputs, each row has a checkbox at first column. The table also has "Select All" checkbox.

When user select the "Select All" checkbox all checkboxes should be selected. i did this with:
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i++ ){ ..........}
, and it works perfect. But after user search/filter something and then click "Select All" checkbox, and then clear filter the row has been still selected even they are not filterd/searched before. This is normal cause due to I select all data on table (oTableLocal.fnGetNodes()). But I want to select only filtered/searched data after or previous filter/search.

is there a way to do that. actually i want something like this:
var aTrs = oTableLocal.fnGetFilteredNodes();
for ( var i=0 ; i<aTrs.length ; i++ ){ ..........}

Thanks in advice.

akibar

Replies

  • allanallan Posts: 23,482Questions: 0Answers: 678
    Hi akibar,

    Try this plug-in function which I've just bashed together: http://datatables.net/plug-ins#api_fnGetFilteredNodes

    Hopefully it will do exactly what you are looking for.

    Allan
  • akibarakibar Posts: 2Questions: 0Answers: 0
    Hi allan,

    That is exactly what i am looking for.

    Thank you,

    akibar
  • maatermaater Posts: 2Questions: 0Answers: 0
    @allan @akibar This plugin seems to have been deleted. Can either of you guys share the code here? Thanks.
  • allanallan Posts: 23,482Questions: 0Answers: 678
  • maocampoqmaocampoq Posts: 1Questions: 0Answers: 0
    I solved a similar problem by using the footer call back

    "fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay)

    aiDisplay has the list of all elements currently filtered, so i simply iterate on aaData till the length of aiDisplay and do whatever i want, in my case i just want to get the Sum of column 1 of all currently filtered rows

    var total = 0;
    for (var i = 0; i < aiDisplay.length; i++) {
    var number = aaData[aiDisplay[i]][1] * 1;
    total += number;
    }
  • allanallan Posts: 23,482Questions: 0Answers: 678
    fnGetFilteredData is a redundant plug-in now since the underscore function which is built into DataTables 1.9 will do the same thing:

    table._('tr', {"filter":"applied"});
    Allan
  • robertbrowerrobertbrower Posts: 158Questions: 1Answers: 0
    Thanks Allen.

    I solved my problem by using the dollar sign API method in conjunction with fnGetData, fnUpdate, and fnRedraw. Here's my code for anyone interested.

    In my case I have 2 checkboxes in the first column header. They both have the toggleAll class applied. One is checked, the other is not. When the user clicks the checked checkbox, then all filtered rows should be checked. When the user clicks the unchecked checkbox then all filtered eows should be unchecked.

    My HTML table contains "unchecked" in the first cell of each row. Then I initialize my plugin:



    settings.$dataTable = $this.find("#TrendParametersTable").dataTable({
    "bJQueryUI": true
    , "sPaginationType": "full_numbers"
    , "sScrollY": "250px"
    , "aoColumnDefs": [
    {
    "aTargets": [0]
    , "bSearchable": false
    , "fnRender": function (obj) {
    var html = '<input name="trendParameter" type="checkbox"' + (obj.aData[0] == 'checked' ? ' checked="checked"' : '') + '" value="' + obj.aData[1] + '" onclick="$.fn.TrendParameters.Toggle(this, ' + obj.iDataRow + ', ' + obj.iDataColumn + ');" />';
    return html;
    }
    , "bUseRendered": false
    }
    , {
    "aTargets": [1]
    , "bSearchable": false
    , "bVisible": false
    }
    ]
    , "aaSorting": [[2, "asc"]]
    });

    I use fnRender to render a checkbox with the appropriate state in the first column of each row. This is so I can sort by which rows are checked. Note... the use of bUseRendered: false is required in order to sort on the text in the cell and not the rendered checkbox.

    $this.find("input.toggleAll").click(function () {
    var $checkbox = $(this);
    // Most browsers change the state of the checked atttribute before dispatching the event
    // and reset the state if the event is cancelled, i.e. return false.
    // http://bugs.jquery.com/ticket/3827
    var text = ($checkbox.is(":checked") == true ? "unchecked" : "checked");
    var filteredRows = settings.$dataTable.$('tr', { "filter": "applied" });

    $.each(filteredRows, function (index, tr) {
    var data = settings.$dataTable.fnGetData(tr);
    data[0] = text;
    settings.$dataTable.fnUpdate(data, tr, null, false, false);
    });

    settings.$dataTable.fnDraw();
    return false;
    });

    I apply a click handler to the checkboxes in the header of the first colum. Using Allen's suggestion (I actually used the $ api method instead), I can figure out which rows exist after considering the filter (search). Then I get the data for each row and update it. After all updates, I call fnDraw() to refresh the visible rows.

    The onclick handler for the checkboxes rendered in fnRender looks like this:

    $.fn.TrendParameters.Toggle = function (obj, row, column) {
    var $table = $($.fn.dataTable.fnTables(true))
    var aData = $table.dataTable().fnGetData(row);
    // Most browsers change the state of the checked atttribute before dispatching the event
    // and reset the state if the event is cancelled, i.e. return false.
    // http://bugs.jquery.com/ticket/3827
    aData[0] = $(obj).is(":checked") == true ? "checked" : "unchecked";
    };

    It merely sets the data to the correct state. Note... fnUpdate and fnDraw are not needed here since the action of clicking on the checkbox in the first place checks it. And fnUpdate doesn't seem to be required in order for the data to be persistent.

    Thanks Allen.

    Bob
  • allanallan Posts: 23,482Questions: 0Answers: 678
    edited July 2012
    Good to hear that did the business for you.

    Note... fnUpdate and fnDraw are not needed here since the action of clicking on the checkbox in the first place checks it.

    For live DOM elements this is absolutely correct - like checkboxes. However, if you were manipulating plain text and wanted filtering / sorting to work with the updated data, you would need to use fnUpdate, so DataTables knows that something has changed.

    *edit* I should say that it would be nice not to need fnUpdate at all, but until DOM mutation events ( http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents ) are supported by the vast majority of browsers in use, we are stuck with it... One day... :-)

    Allan
  • macusermacuser Posts: 20Questions: 0Answers: 0
    Hi Allan,

    Can you please link me to http://datatables.net/plug-ins/api#fnGetFilteredData, as we still use Datatables 1.8.2.
    I am sure there would be more users who are still dependent on DT 1.8.2.
    So it will be useful if you could get back that page.

    Thanks,
    Swad
  • MalcolmMalcolm Posts: 1Questions: 0Answers: 0
This discussion has been closed.