Customized filter

AlainS

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!

colin

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

AlainS

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());
}

sandy

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