Datatables. Hide / Show multiple rows within loop

Question

This questions targets to Datatables plug-in for JQuery.

I have HTML table with 3 languages en, ru, fr. For example if English language is chosen French and Russian entries should be hidden, if Russian language is chosen then French and English entries should be hidden and so on.

In the HTML table id looks like:

etc_1_en
etc_1_ru
etc_1_fr
etc_2_en
etc_2_ru
etc_2_fr
etc_3_en
etc_3_ru
etc_3_fr
...

But each entry have the same class: row

HTML table like this:

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr id="etc_1_en" class="row">
      <td>Etc 1</td>
      <td>Etc 2</td>
    </tr>
    <tr id="etc_1_ru" class="row">
      <td>Etc 3</td>
      <td>Etc 4</td>
    </tr>   
    <tr id="etc_1_fr" class="row">
      <td>Etc 5</td>
      <td>Etc 6</td>
    </tr>   
    <tr id="etc_2_en" class="row">
      <td>Foo 1</td>
      <td>Foo 2</td>
    </tr>
    <tr id="etc_2_ru" class="row">
      <td>Foo 3</td>
      <td>Foo 4</td>
    </tr>   
    <tr id="etc_2_fr" class="row">
      <td>Foo 5</td>
      <td>Foo 6</td>
    </tr>       
  </tbody>
</table>

There are 3 buttons with ID like:

btn_id_en
btn_id_ru
btn_id_fr

But each button have the same class: btn

Here is JQuery code:

tbl = $('#myTable').DataTable();
var rows = tbl.rows().data();

// there looping through all entries
rows.each(function (row, index) {
    var row = tbl.row(index);
    var data = row.data();
    var id = row.id();

    // there trying to assign each row to child variable (using Datatable)
    var child = row.child;      

    if (/* some conditions */) {  // if / else conditions is working, tested with console.log();           

        // this part not working, something wrong with child maybe
        child.show();

    } else {

        // this part not working, something wrong with child maybe
        child.hide();
    }
}

row.id() returning correct ID of each row (tested via console.log(id);). Problem is that hide not working. I'm thinking that something wrong with declaring child.

Maybe I have to use remove() instead of hide(), but in this case how could I restore it after another button will be clicked?

Have you any ideas?

@AbhilashRavindranCK I don't think that there HTML table will help. There is problem only with child.hide() and child.show(). Table is very simple here. — Infinity
– Infinity, Commented Mar 7, 2018 at 12:40
@AbhilashRavindranCK I've tried to print child, but this nothing says to me: ƒ (){var d=b.apply(a,arguments);s.extend(d,d,c.methodExt);return d} — Infinity
– Infinity, Commented Mar 7, 2018 at 12:42

annoyingmouse · Accepted Answer · 2018-03-08 08:39:23Z

2

If you're use case is simply to have buttons then this should work:

var lang = ""

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
        return thisId === lang;
    }
);

var table = $('#example').DataTable({
    "language": {
        "infoFiltered": ""
    }
});

$(".filter").click(function(e) {
    lang = $(e.target).attr("id").split("_")[2];
    table.draw();
});

Working JSFiddle here: https://jsfiddle.net/annoyingmouse/opu869ko/

edited Mar 8, 2018 at 8:39

answered Mar 8, 2018 at 8:17

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Infinity Over a year ago

Thank you, that worked! Have you ideas how could I hide this part (filtered from 6 total entries) if edit this number is impossible? It's possible to use "info": false in this case it will hide all info, but is it possible to hide only this part: (filtered from 6 total entries)?

annoyingmouse Over a year ago

@Infinity see my updated answer and JSFiddle - it's an option in the language setting, setting it to an empty string removes it.

Infinity Over a year ago

Thank you! It helped me a lot!

annoyingmouse · Accepted Answer · 2018-03-07 14:32:02Z

2

That was fun!

You need a custom filter:

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        var langs = new Set();
        $(".filter").each(function(k, v) {
            if ($(v).is(':checked')) {
                langs.add($(v).attr("id").split("_")[2]);
            }
        });
        var thisId = Object.keys(settings.aIds)[dataIndex].split("_")[2]
        return langs.has(thisId);
    }
);

And I'm wary of using buttons as you'd probably need to show the hidden rows at some point so I've replaced them with checkboxes:

<label for="btn_id_en">
  <input class="filter" id="btn_id_en" type="checkbox" checked="checked">
  English
  </label>
<label for="btn_id_ru">
  <input class="filter" id="btn_id_ru" type="checkbox" checked="checked">
  Russian
</label>
<label for="btn_id_fr">
  <input class="filter" id="btn_id_fr" type="checkbox" checked="checked">
  French
</label>
<hr>
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header content 1</th>
            <th>Header content 2</th>
        </tr>
    </thead>
    <tbody>
        <tr id="etc_1_en" class="row">
            <td>Etc 1</td>
            <td>Etc 2</td>
        </tr>
        <tr id="etc_1_ru" class="row">
            <td>Etc 3</td>
            <td>Etc 4</td>
        </tr>
        <tr id="etc_1_fr" class="row">
            <td>Etc 5</td>
            <td>Etc 6</td>
        </tr>
        <tr id="etc_2_en" class="row">
            <td>Foo 1</td>
            <td>Foo 2</td>
        </tr>
        <tr id="etc_2_ru" class="row">
            <td>Foo 3</td>
            <td>Foo 4</td>
        </tr>
        <tr id="etc_2_fr" class="row">
            <td>Foo 5</td>
            <td>Foo 6</td>
        </tr>
    </tbody>
</table>

Working JSFiddle here.

Hope that helps.

answered Mar 7, 2018 at 14:32

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

6 Comments

spawnedc Over a year ago

This answer is more comprehensive and opens up lots of other possibilities. Ignore mine :)

Infinity Over a year ago

Thanks for an answer, it looks like should almost did the job, but... There is wrong count of Total Entries... It shows 6, but for real it should be 2 only, just translated to 3 languages. Maybe there is ability to edit Total Entry counting?

annoyingmouse Over a year ago

Ah, now, you see I'd say that was the correct count unchecking one leaves this text Showing 1 to 4 of 4 entries (filtered from 6 total entries), which is correct - if you start looking at pagination then things could start to go really odd, especially if you interfere with the count. I'd leave well enough alone unless you want to just remove the text which you can do with the dom. Alternatively, you could have multiple tables, one per language, perhaps in tabs...

Infinity Over a year ago

User should see 1 table, with ability to change language. For use there will be only 2 entries, just translated to 3 or more languages, so if it will show total 6 entries this will be incorrect. Also there should be only 1 table, not 3 separate. How about dom? What can be done?

Infinity Over a year ago

@annoyingmouse and could you help me to achieve it using buttons, not checkboxes? There never will be ability to select multiple languages.

|

spawnedc · Accepted Answer · 2018-03-07 13:54:48Z

0

child is not a variable but a function. Replacing:

var child = row.child;

with

var child = row.child();

should fix it.

See here: https://datatables.net/reference/api/row().child().hide()

answered Mar 7, 2018 at 13:54

spawnedc

4765 silver badges9 bronze badges

1 Comment

Infinity Over a year ago

Thanks for an answer. In this case I got an error: Cannot read property 'hide' of undefined. As per documentation:

jQuery object with the child rows for the parent row in its result set, or undefined if there are no child rows set for the parent yet.

It looks like row is not child. Have you ideas, how to figure it out?

Collectives™ on Stack Overflow

Datatables. Hide / Show multiple rows within loop

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related