Individual columns searching with Colvis

ChrisFroome

Hi all:
I am using datatable with Colvis and now I need to add filtering by indidual columns and the filter must be place at the top with the header. The problem I have, is that I don't know how to do to hide the filters when that columns is also hidden using colvis. And in addition, who to anable it if the user decides to make visible a column, the correspondent search filter must be visible as well.

Here is my code, but isn't working because I see all the search filters visible, it should get hidden if the column is hidden.

HTML:

<

table id="tblCounterparty" class="table table-striped table-bordered">

<thead>

<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Classe</th>
<th>Status</th>
<th>Taxable</th>
<th>Credit Status</th>
<th>VatID</th>
<th>Holding</th>
<th>Culture</th>
<th>Credit Risk</th>
<th>Insert Username</th>
<th>Insert Date</th>
<th>Modify Usernam</th>
<th>Modify Date</th>
</tr>
</thead>

<thead class="filters">
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Classe</th>
<th>Status</th>
<th>Taxable</th>
<th>Credit Status</th>
<th>VatID</th>
<th>Holding</th>
<th>Culture</th>
<th>Credit Risk</th>
<th>Insert Username</th>
<th>Insert Date</th>
<th>Modify Usernam</th>
<th>Modify Date</th>
</tr>
</thead>
.................

Jquery:

$(document).ready(function () {

        // DataTable
        var table = $(".table").DataTable({
            dom: 'CRlfrtip',
            stateSave: true,
            columnDefs: [
                { targets: 0, orderable: false },
                { targets: [11, 12, 13, 14], visible: false }
            ]
        });

        // Setup - add a text input to each footer cell
        $('#tblCounterparty .filters th').each(function () {
            //alert($(this).index());
            if ($(this).index() != 0 || $(this).index() != 11 || $(this).index() != 12 || $(this).index() != 13 || $(this).index() != 14) {

                var title = $('#tblCounterparty thead th').eq($(this).index()).text();
                $(this).html('<input class="form-control input-sm" type="text" placeholder="Search ' + title + '" />');
            };
        });

        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            //alert(colIdx);
            if (colIdx != 0 || colIdx != 11 || colIdx != 12 || colIdx != 13 || colIdx != 14) {

                $('input', $('.filters th')[colIdx]).on('keyup change', function () {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

            };
        });

        $(".content").css("padding", "3px 15px");

    });

any help?
Thanks

ChrisFroome

thanks for the help !

ChrisFroome

Looks like I'm supporting me by myself :)
Here is the solution for someone that has the same problem:

html:
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>Short Name</th>
<th>Classe</th>
<th>Status</th>
<th>Credit Status</th>
<th>VatID</th>
<th>Holding</th>
<th>Culture</th>

                        <!-- colonne nascosto -->
                        <th>Credit Risk</th>
                        <th>Oracle Id Customer</th>
                        <th>Oracle Id Supplier</th>
                        <th>Atradius BN</th>
                        <th>GME Relevant</th>
                        <th>Insert Username</th>
                        <th>Insert Date</th>
                        <th>Modify Usernam</th>
                        <th>Modify Date</th>
                        <!-- colonne nascosto -->
                    </tr>
                </thead>
                <thead class="filters">
                    <tr>
                        <td></td>
                        <td>ID</td>
                        <td>Name</td>
                        <td>Classe</td>
                        <td>Status</td>
                        <td>Credit Status</td>
                        <td>VatID</td>
                        <td>Holding</td>
                        <td>Culture</td>
                        <td>Credit Risk</td>
                        <td>Oracle Id Customer</td>
                        <td>Oracle Id Supplier</td>
                        <td>Atradius BN</td>
                        <td>GME Relevant</td>
                        <td>Insert Username</td>
                        <td>Insert Date</td>
                        <td>Modify Usernam</td>
                        <td>Modify Date</td>
                    </tr>
                </thead>

jquery:

$(document).ready(function() {

        // DataTable
        var table = $(".table").DataTable({
            dom: 'CRlfrtip',
            stateSave: true,
            columnDefs: [
                { targets: 0, orderable: false },
                { targets: [10, 11, 12, 13, 14, 15, 16, 17, 18], visible: false, "searchable": false }
            ]
        });

        // Setup - add a text input to each footer cell
        $('#tblCounterparty .filters td').each(function() {
            //alert($(this).index());
            var count = $(this).index();
            var flag = table.column(count).visible();

            if (flag && $(this).index() != 0) {
                //var title = $('#tblCounterparty thead td').eq($(this).index()).text();
                $(this).html('<input type="text" />');
            };

            if (flag == false) {
                $(this).remove();
            }
        });

        //// Apply the search
        table.columns().eq(0).each(function(colIdx) {
            //alert(colIdx);
            if (colIdx != 0 & colIdx < 10) {

                $('input', $('.filters td')[colIdx]).on('keyup change', function() {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

            };
        });

        $(".content").css("padding", "3px 15px");

    });

daniel_r

or you can use my yadcf plugin (support ColVis and tons of other features of datatables)

ChrisFroome

I don't see how to show/hide columns like colvis. Not useful sorry.

daniel_r

yadcf does not show / hide columns, but yadcf filters know how to appear / disappear with the columns as a result of ColVis actions...

ChrisFroome

Thanks, it is possible to mix datatable colvis with yadcf ? do you have some example?

daniel_r

Yes, just call yadcf.init or the older yadcf api and thats it, all is done implicitly by yadcfm see showcase / read docs of yadcf for more info...