Server side filtering using custom select input
Server side filtering using custom select input
Restful Web Services            
            
                Posts: 202Questions: 49Answers: 2            
            I am just looking for some input as to whether the following solution is 'good' or if a better method is available? I needed a custom select input which could be used to control a server side filter of the data pulled back by my ajax request. Importantly I wanted it to have 'session' memory so if the user revisited the page the filter was already set to the value it was on previously.
After the table has initialised I build the options within the select from the pre-built option list from my server side program.
Creating the option list on the serverside:
                        ->options( DataTables\Editor\Options::inst()
                            ->table( 't_chalet' )
                            ->value( 'iChaletId' )
                            ->label( 'sChalet'  )
                            ->render( function ( $row ) {
                                return $row['sChalet'];
                            })
                        )
Building the select field and updating the local storage item when the value is changed:
            initComplete: function () {
            
                var json = table.ajax.json();
                var data = json.options['t_owneraccount.iChaletId'];
                
                $('#iChaletId').selectize({
                    placeholder : 'Please select a chalet',
                    sortField : 'label',
                    valueField : 'value',
                    labelField : 'label',
                    onChange: function(value) {
                        localStorage.setItem('p_value_1_' + location.pathname, value);
                        table.ajax.reload(null, false);
                    }
                });
                
                var selectize = $("#iChaletId")[0].selectize;
                selectize.clear();
                selectize.clearOptions();
                selectize.load(function(callback) {
                    callback(data);
                });
                selectize.setValue(localStorage.getItem('p_value_1_' + location.pathname));    
            
            },      
Reloading the datatable with the newly selected value from the select field:
                data : function(d) {
                    d.table = "t_owneraccount",    
                    d['primary'] = {
                        value_1 : localStorage.getItem('p_value_1_' + location.pathname),                   
                    };                                                                                    
                }
            },
Does this seem like a reasonable approach? I wonder whether it is better to use datatable session storage rather than localstorage?
This question has an accepted answers - jump to answer
Answers
Yes - what you have done looks perfectly valid and correct to me. This input doesn't directly depend upon the DataTable, so I think it is correct that it should have its own localStorage parameter.
Allan
Great, thanks.