Custom filter UI

Step 1: Hide the default filtering component

Seeing as you want to create a fully custom UI for filtering the first step is to simply hide the built in one using the below CSS. This CSS should be included in your page after the FooTable CSS is included.

.footable-filtering {
	display:none;
}

Step 2: Create your custom UI

In the above example the UI created is simply a radio list of statuses a user can choose from. The below is the HTML markup used to create them using Bootstrap.

<div class="well">
	<form class="form-inline">
		<label class="radio-inline">
			<input type="radio" name="status" id="status_none" value="none" checked>
			None
		</label>
		<label class="radio-inline">
			<input type="radio" name="status" id="status_active" value="active">
			Active
		</label>
		<label class="radio-inline">
			<input type="radio" name="status" id="status_disabled" value="disabled">
			Disabled
		</label>
		<label class="radio-inline">
			<input type="radio" name="status" id="status_suspended" value="suspended">
			Suspended
		</label>
	</form>
</div>

Step 3: Hooking up the UI

Now that we have our custom UI we need to hook it into FooTable so that when a user interacts with it it will filter the table as expected. To do this we bind to the change event of each radio and then add/remove and apply the filter as necessary. This JavaScript should be included within a jQuery ready function on the page, preferably within the same one calling FooTable, but after the call to FooTable's constructor.

For more information on the addFilter, removeFilter and other filtering methods please look at the JSDocs for the component.

$('[name=status]').on('change', function(){
	var filtering = FooTable.get('#showcase-example-1').use(FooTable.Filtering), // get the filtering component for the table
		filter = $(this).val(); // get the value to filter by
	if (filter === 'none'){ // if the value is "none" remove the filter
		filtering.removeFilter('status');
		filtering.clear();
	} else { // otherwise add/update the filter.
		filtering.addFilter('status', filter, ['status']);
		filtering.filter();
	}
});

Finished!

That's it! We now have a custom filter UI that is fully integrated with the rest of the tables' functionality.