Server side filtering using custom select input

Server side filtering using custom select input

Restful Web ServicesRestful 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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • Restful Web ServicesRestful Web Services Posts: 202Questions: 49Answers: 2

    Great, thanks.

This discussion has been closed.