Load column filters in input fields

jvdb

Hello.

I use column filters with AJAX. I read some posts about how to fill the input fields after a refresh when using saveState. I used this example: live.datatables.net/neqozaj/1/edit

My problem is that it fills all the fields with the loaded value.

Here's my javascript:

`

    $(document).ready(function () {

        // Add a text input to each header column
       $('#message_table_options thead th').each(function () {
            var title = $(this).text();
            if (title != "")
                $('#column_filters').append('<th class="hasinput"><input id="filter_' + title + '" type="text" class="form-control" placeholder="Search ' + title + '" /></th>');
            else
                $('#column_filters').append('<th></th>');
        });

        // Draw table with header, body and footer + options
        var table = $('#message_table_options').DataTable({
            "bServerSide": false,
            "stateSave": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/api/MessageFactsAPI",
                "dataSrc": ""
            },
            "columns": [
                { "data": "Event/EventID" },
                { "data": "MessageInstance/SchemaName" },
                { "data": "Event/Timestamp" },
                { "data": "Event/Port" },
                { "data": "Event/Direction" },
                { "data": "Event/URL" },
                { "data": "Event/Adapter" },
                {
                    "orderable": false,
                    "data": "Event/EventID",
                    "render": function (data, type, full, meta) {
                        return '<a href="/messageFacts/' + data + '">Details</a>';
                    }
                }
            ],
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-4'f><'col-sm-8 col-xs-12 hidden-xs'l>>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-4 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-4'p><'col-sm-4 col-xs-12 hidden-xs'T>>",
            "oTableTools": {
                "aButtons": [
                    "copy",
                    "csv",
                    "xls",
                    {
                        "sExtends": "pdf",
                        "sTitle": "Message_Export",
                        "sPdfMessage": "Message PDF Export",
                        "sPdfSize": "letter"
                    },
                    {
                        "sExtends": "print",
                        "sMessage": "<i>(press Esc to close)</i>"
                    }
                ],
                "sSwfPath": "/js/plugin/datatables/swf/copy_csv_xls_pdf.swf"
            },
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
        });

        // Restore column filters
        //TODO: don't fill all fields with the same filter value
        var state = table.state.loaded();
        if (state) {
            table.columns().eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;

                if (colSearch.search) {
                    $('input', table.column(colIdx).footer()).val(colSearch.search);
                }
            });

            table.draw();
        }

        // Apply the column filter
       $("#message_table_options thead th input[type=text]").on('keyup change', function () {
            table
                .column($(this).parent().index() + ':visible')
                .search(this.value)
                .draw();
        });
    });

`

With all the other posts it worked for them but it doesn't for me. Did my little changes mess up something? I can't find it.

jr42.gordon

Try using this cool plugin

jvdb

Ah I've already heard of it but didn't really look into it. Indeed a very cool plugin thanks!