After add, update table rows, column filter select option drop down values not updating.

chandrasoft

I have a table with column header drop down values to be filtered. When I add a row or change the row value, I do not see the drop down values getting updated. I triggered the table.draw() event after the CRUD operation but it didn't help either. What am I doing wrong ?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

colin

A possible thing to try is rows().invalidate().draw(), if that doesn't work, we'll need that test case.

Colin

chandrasoft

Hi Colin, I tried invalidate method and it didn't help. This is the linked page. If I add the event name say "zzz", it is not showing the item under Event Name dropdown filter. I have attached the table definition below. Looking forward to the solution. Thanks

var eventData = $('#eventTable').DataTable({

    initComplete: function () {
        var i=1;
        this.api().columns([1,2,3]).every( function () {

            var column = this;
            var select = $('<select><option value=""></option></select>')
                //.appendTo( $(column.header()) )
                .appendTo( $('#eventTable thead tr:eq(1) th').eq(i).empty() )
                .on( 'change', function () {

                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val() 
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();

                } );

            column.data().unique().sort().each( function ( d, j ) {
                var dl = d;
                select.append( '<option value="'+dl+'">'+dl+'</option>' )
            } );

            i = i + 1; 

        } );
    },

    "orderCellsTop": true,
    "processing":true,      
    "responsive": true,
    "ajax":{
                url: 'action.php',
                type: 'POST',
                data: {action:'listEvent',timezone:timezone},
                dataType: 'json',
                dataSrc: ""
            },

    "columns": [
                    { "data": "eventid" },
                    { "data": "eventdate",                             
                        "render": function (data, type, full, meta) {
                            return '<span data-toggle="tooltip" title="'+  getDayName(data)+ '">' + data + '</span>';
                        }


                    },
                    { "data": "eventname" },                        
                    { "data": "totsongs" },
                    { "data": "action" },
                    { "data": "eventsongs"}
                ],

    "columnDefs":[ {
                    "targets": [ 4 ],
                    "searchable": false,
                    "orderable": false
                    },
                    {
                    "targets": [ 5 ],
                    "visible": false,
                    }
                ],

    "sorting": [ [0,'desc'], [1,'desc'] ],

    "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

    "Language": {
        "Paginate": {
            "First":       " ",
            "Previous":    " ",
            "Next":        " ",
            "Last":        " ",
        },

      "LengthMenu":    "Records per page: _MENU_",
      "Info":          "Total of _TOTAL_ records (showing _START_ to _END_)",
      "InfoFiltered":  "(filtered from _MAX_ total records)"
    } 

kthorngren

See if this thread helps.

Kevin

chandrasoft

Thank you kthorngren for the right pointer. The example code put by Allan in Jsfiddle (BuildSelect) resolved this issue. For understanding, why do we need to explicitly build the select values,for each draw? as part of the table reload after crud completion, should this not be automatically taken care by the datatable reload mechanism?

kthorngren

The search inputs you create are not part of the Datatables API. It has no knowledge of them so won't perform any actions on them. It is your responsibility to keep up with the select options

Kevin