Installation

The easiest way to install any extension for for DataTables, including SearchBuilder, is with the download builder. With the download builder, you select the components of the DataTables suites and styling you want, and it will generate the packages / install commands for you to use.

The download builder includes options for direct loading with script and link tags, details for using a package manager such as npm and NuGet, or a download option if you wish to have the files locally.

The download builder is strongly recommended for getting started with SearchBuilder, and all other DataTables software, particularly so you make sure that the correct styling integration files are available on your page.

However, if you prefer to create the installation yourself, below is an overview of installation via the CDN and npm for the DataTables default styling of SearchBuilder.

CDN

Assuming that you already have DataTables installed simply add the CSS and JS for SearchBuilder by inserting the following two tags to your HTML, after the core DataTables file has been included.

<link href="https://cdn.datatables.net/searchbuilder/2.0.0-beta.1/css/searchBuilder.dataTables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/searchbuilder/2.0.0-beta.1/js/dataTables.searchBuilder.min.js"></script>

Once done you will be able to define the searchBuilder option in the DataTable options to configure SearchBuilder. Please see the configuration documentation for details.

NPM

To install SearchBuilder via npm use:

npm install datatables.net-searchbuilder-dt

Note that the -dt at the end of the package name denotes that it is for DataTables default styling. For other styling integrations, this postfix must be changed. Use the download builder to get the required packages.

To use SearchBuilder in your own software include the following just after you import the core DataTables library - e.g.:

import DataTable from 'datatables.net-dt';
import 'datatables.net-searchbuilder-dt';

Note that SearchBuilder doesn't import to a specific constant - rather the software is automatically attached to the constant imported from DataTables core and made available from there.

You will now be able to define the searchBuilder option in the DataTable options to configure SearchBuilder. Please see the configuration documentation for details.

Sources

If you are interested in building SearchBuilder from source yourself, you can find it on Github. The source is Typescript and SCSS which is transpiled to Javascript and CSS. The SearchBuilder source is released under the MIT license. See the DataTables manual for more details on building DataTables and the extensions.