{% if not table.table_options.no_col_search %}
{% for c in table.columns %}
    <th style="padding-left: 0; padding-right: 4px">
        {% if not c.options.no_col_search %}
            {% if c.options.col_search_select %}
                <select name="{{ c.column_name }}" type="text" class="form-control form-control-sm small column-search-select"
                   data-col="{{ c.column_name }}">{% spaceless %}
                <option/>
                {% for option in c.options.col_search_select %}
                <option value="{{ option.0 }}">{{ option.1 }}</option>
                {% endfor %}
                </select>{% endspaceless %}
            {% else %}
                <input name="{{ c.column_name }}" type="text" class="form-control form-control-sm small column-search"
                       data-col="{{ c.column_name }}"/>
            {% endif %}
        {% endif %}
    </th>
{% endfor %}
{% endif %}

<script>
    var plugin = {
        init: function (table, state_data) {
            $('#{{ table.table_id }}_wrapper .column-search, #{{ table.table_id }}_wrapper .column-search-select').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', function () {
                table.table.api().column($(this).attr('data-col') + ':name').search(this.value, false, true, true)
                    .draw();
            })
            $('#{{ table.table_id }}_wrapper .column-search-select').on('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 }}_wrapper .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);
            }
            var search_boxes_select = $('#{{ table.table_id }}_wrapper .column-search-select')
            for (var s = 0; s < search_boxes_select.length; s++) {
                $(search_boxes_select[s]).val('');
                table.api().column($(search_boxes_select[s]).attr('data-col') + ':name').search('', false, true, true);
            }
        }
    }
    django_datatables.add_plugin('{{ table.table_id }}', plugin)

</script>