Customized filter

Customized filter

AlainSAlainS Posts: 2Questions: 1Answers: 0

I integrated DataTables in my application, yesterday, and it works fantastic, thanks a lot!

I want to offer my users a selectbox with predefined filters. What is the way to go, to realise that?

For example a filter with all people with a Salary>100.000 and their Lastname starting with an 'A'. And another filter of people with City=Amsterdam and Salary<25.000. Etc.

Thanks!

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    If you wanted to use SearchBuilder, you could use the API to load pre-defined searches, as shown in this example.

    Otherwise, you'll need a button to load a custom search plugin - there are a few examples here,

    Colin

  • AlainSAlainS Posts: 2Questions: 1Answers: 0

    Thanks!

    I added the searchBuilder.min.js and .css to the page and the filtering with buttons works well.

    But now I want to create my pre-defined custom filters (that my users can select) and result in a an accordingly filtered table.

    The name of my (only) table is datatable_1. I wrote a function that is called right after the page is written: datatablesManager(), see below. In that function an eventlistener is defined on the listbox, named 'filter_choice'. When the user clicks on option 1 then I want to overwrite searchBuilder.preDefined. I was hoping that the criteria were used for a new table.draw(). But it doesn't work, after the user selects option 1 the console gives the errormessage: "Uncaught TypeError: Cannot read property 'push' of undefined". This is the line of the error:
    $.fn.dataTable.defaults.searchBuilder.push.

    I'm afraid I'm approaching things in the wrong way?

    Thanks!

    function datatablesManager () {
        
        // https://www.datatables.net/examples/index
        
            $('#filter_choice').change( function() {
                alert($('#filter_choice').val());
                if($('#filter_choice').val()==1) {
                $.fn.dataTable.defaults.searchBuilder.push(
                        { 
                                  preDefined: {
                                      criteria: [
                                          // Criteria or sub-group objects go here
                                          {
                                              condition: '=',
                                              data: 'Url',
                                              value: ['https://www.kh-metals.nl/nl/']
                                          },
                                      ],
                                      logic: 'OR' // Use `OR` logic for the group
                                  }
                            
                        },
                    );
            }
            table.draw();
        } );
    
        // Setup - add a text input to each footer cell
        $('#datatable_1 tfoot th').each( function () {
            $(this).html( '<input type="text" placeholder="Search" />' );
        } );
        
        let table = $('#datatable_1').DataTable({
            
         "searching": true,
         "paging":   true,
            "ordering": true,
            "order": [[ 1, "desc" ]],
            "pageLength": -1, //all records
            "lengthMenu": [
                [10, 25, 50, 100, -1],
                ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']],   
            columnDefs: [
                {
                   targets: 0,
                   className: 'dt-left'
                },
                    {
                        targets: 1,
                        className: 'dt-right'
                    },
                    {
                        targets: 2,
                        className: 'dt-right'
                    },
                    {
                        targets: 3,
                        className: 'dt-right'
                    },
                {
                   targets: 4,
                   className: 'dt-left'
                },
                    {
                        targets: 5,
                        className: 'dt-right'
                    },
                {
                   targets: 6,
                   className: 'dt-left'
                },
                    {
                        targets: 7,
                        className: 'dt-right'
                    },
                    {
                        targets: 8,
                        className: 'dt-right'
                    }
                  ],
            dom: 'Qlfrtip',    
            searchBuilder:{
                preDefined: {
                    criteria: [
                        // Criteria or sub-group objects go here
                      {
                            condition: '',
                            data: '',
                            value: ['']
                        },
                    ],
                    logic: '' 
                }
            },
            "info":     true,
            initComplete: function () {
                // Apply the search
                this.api().columns().every( function () {
                    var that = this;
     
                    $( 'input', this.footer() ).on( 'keyup change clear', function () {
                        if ( that.search() !== this.value ) {
                            that
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );
            }
        
        });
        new $.fn.dataTable.SearchBuilder(table, {});
        table.searchBuilder.container().prependTo(table.table().container());
    }
    
  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @AlainS ,

    searchBuilder.preDefined will only be used when the table is first initialised, not after every draw. That being said, I would advise using the searchBuilder.rebuild() method rather than re-initialising the table every time. The example that colin linked is showing this in action. I think it is more likely to do what you are looking for.

    Thanks,
    Sandy

Sign In or Register to comment.