Usage

The SearchBuilder extension adds a "feature" to DataTables - that is, a component which can be used in the layout option of DataTables, allowing you to place the search interface around the table as your UI requires. In this way, it is actually possible to have multiple independent SearchBuilder components displayed around the table if you require.

In its basic form, SearchBuilder is initialised as a string in the location of layout that you wish it to be displayed, for example:

new DataTable('#myTable', {
    layout: {
        top: 'searchBuilder'
    }
});

In this case, the SearchBuilder UI will be shown immediately above the default page length and search input features of DataTable. For a more visual guide to the DataTables grid available through layout, please see this example. You will typically wish to use one of the full row layout positions for SearchBuilder (e.g. top, bottom, top1, etc).

Options

The simple case from above will use the default configuration for SearchBuilder's options. You may wish to utilise some of the options to have it suit your needs - for example, you might wish to exclude the first column from SearchBuilder. This can be done with the searchBuilder.columns option. As with all layout features, SearchBuilder can be given as an object key, and its configuration options as the value - this looks like:

new DataTable('#myTable', {
    layout: {
        top: {
            searchBuilder: {
                columns: [1, 2, 3]
            }
        }
    }
});

Buttons

SearchBuilder makes a searchBuilder button type available for the Buttons extension, so you can place the visual complexity of SearchBuilder in a popover that is only displayed when the end user clicks on the relevant button. This is an example of such a button:

new DataTable('#example', {
    layout: {
        topStart: {
            buttons: ['searchBuilder']
        }
    }
});

Legacy option

Prior to the introduction of the layout option in DataTables, layout was done with the dom option (which continues to be supported in DataTables 2 and 3). That option didn't provide the ability to configure the components it was displaying, so a top-level searchBuilder option was used. This also continues to be supported and can be used for the configuration of SearchBuilder:

new DataTable('#myTable', {
    searchBuilder: {
        columns: [1, 2, 3]
    },
    layout: {
        top: 'searchBuilder'
    }
});

In this case, the feature from top: 'searchBuilder' will use the configuration from the searchBuilder option. The disadvantage of this is that you can only specify a single configuration. The initial method above is preferred.