Individual column searching

CountLessQ

I followed this tutorial
https://datatables.net/examples/api/multi_filter.html
I get this error:
Uncaught TypeError: otable.columns(...).every is not a function
at HTMLDocument.<anonymous> (Index:166)
at mightThrow (jquery-3.3.1.js:3534)
at process (jquery-3.3.1.js:3602)
This is my code:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

<!-- jQuery -->

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js">
</script>

@section scripts{

    <script>



        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#item tfoot th').each(function () {

                $(this).html('<input type="text" style="color: black" placeholder="(All)" />');
            });

            // DataTable
            var otable = $('#item').DataTable({
                "paging": false,
                "searching": false,
                 "bInfo": false,
                "bLengthChange": false,
                "pageLength": 200

            });

            // Apply the search
            otable.columns().every(function () {

                var that = this;
                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

        });
    </script>

}

kthorngren

Looks like your code should work. Is that the complete Datatables init code, ie, do you have ajax? If you have the ajax option then you will need to move the line 22-33 into initComplete and instead of otable.columns().every(function () { use this.api().columns().every(function () { like this example.

If this doesn't help then please post a link to your page or a test case replicating the problem so we can help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

CountLessQ

@kthorngren I am not sure I follow but I tried what you said, same issue. Here is my sample.
http://live.datatables.net/tuxowiku/1/edit

kthorngren

You are using an old version of datatables.js (1.10.5). According to the columns().every() docs this API was introduced in 1.10.6:

Since: DataTables 1.10.6

But you are loading the 1.10.20 version of datatables.css. Try the latest version.

Kevin

CountLessQ

@kthorngren
I am using this now:

The error is gone But the issue is still there. The search doesn't work. what is the latest version of css <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

kthorngren

Do you have an updated test case?

The latest Datatables version is 1.10.20. The style sheet version should match the Datatables version you are using.

Kevin

CountLessQ

@kthorngren http://live.datatables.net/tuxowiku/5/edit

kthorngren

You have "searching": false, which will turn off searching. To leave searching on and remove the search input you need to use the dom option.

Kevin

CountLessQ

Thank you. I didn't know that. here is the final code: http://live.datatables.net/tuxowiku/5/edit