{% if not table.table_options.no_col_search %}
{% for c in table.columns %}
    <th>
        {% if not c.options.no_col_search %}
            <input name="{{ c.column_name }}" type="text" class="form-control form-control-sm small column-search"
                   data-col="{{ c.column_name }}"/>
        {% endif %}
    </th>
{% endfor %}
{% endif %}

<script>
    var plugin = {
        init: function (table, state_data) {
            $('#{{ table.table_id }}_wrapper .column-search').each(function () {
                try {
                    $(this).val(state_data.columns[table.table.api().column($(this).attr('data-col') + ':name').index()].search.search)
                } catch (e) {
                    console.log(e)
                }
                if ($(this).attr('data-col') != '' && this.value != '') {
                    table.table.api().draw(false)
                    table.table.api().column($(this).attr('data-col') + ':name').search(this.value, false, true, true)
                }
            })
            $('#{{ table.table_id }}_wrapper .column-search').on('keyup change', function () {
                table.table.api().column($(this).attr('data-col') + ':name').search(this.value, false, true, true)
                    .draw();
            })
        },

        clear: function () {
            var table = django_datatables.DataTables['{{ table.table_id }}'].table
            var search_boxes = $('#{{ table.table_id }} .column-search')
            for (var s = 0; s < search_boxes.length; s++) {
                search_boxes[s].value = ''
                table.api().column($(search_boxes[s]).attr('data-col') + ':name').search('', false, true, true);
            }
        }
    }
    django_datatables.add_plugin('{{ table.table_id }}', plugin)

</script>