Hiding column by searching for a specific string in header

Izemrasen

Hello everyone,

I'm actually working on a project, I have a set of data in csv and converts it to html through powershell. In each 3 columns I have an ID (an integer), like this : Source 1 Name | Source 1 value | Source 1 difference | Source 2 Name | ...

My objectif is by clicking on a check box with the corresponding ID, it would hide the set of column with that ID. I manage to do that by doing like this :

<script type="text/javascript" class="init">
    $(document).ready( function () {
        var table = $('#mytable').DataTable();

        $('input.custom-control-input').change(function (e) {
            e.preventDefault();

            var toggle = this;
            var numSource = toggle.nextElementSibling.innerText;
                $(mytable).find("th:contains(' " + numSource+ " ')").each(function() {
                        var col = table.column(this);
                        if(toggle.checked){
                            col.visible(false);
                        } else {
                            col.visible(true);
                        }
                    });
            })
    } );
</script>

The problem is when it's hidden I can't get the columns back (make them visible) by unchecking the checkbox, I understood that my "find " doesn't work when a column is hidden as the "th line" is not found. So I thought to replace it by something else that would enable me to get the column through header using Datatables API, but I didn't find how to do it. Can you help me please ? Thanks

colin

Hi @Izemrasen ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Izemrasen

Oh sorry, here is a test case, thanks :

http://live.datatables.net/rexezodu/1/

colin

Hi @Izemrasen ,

It's because you were checking the DOM for those headers, which no longer exists. If you use columns().every() like this here, it works as expected,

Cheers,

Colin

Izemrasen

Hi @colin

Thank you very much, my problem is solved, have a nice day