Custom filtering With Button for Datatable

Question

Im using Datatable for my current project. In one of my table I have several columns. One of the column is Status column that will have one of three value Open, Rejected, and Approved. I want to filter record that shown in table with three button, In Progress and Closed, like this:

<div class="btn-group pull-right">
    <button id="onprogress" class="btn btn-default filter">On Process</button>
    <button id="closed" class="btn btn-default filter">Closed</button>
    <button id="all" class="btn btn-default filter">All</button>
</div>

Here is the javascript code that i used:

var dataTables = $('#datatable').DataTable({
    "info": false,
    "lengthChange": false
});

$('#all').on('click', function () {
    dataTables.columns(4).search("").draw();
});

$('#onprogress').on('click', function () {
    dataTables.columns(4).search("Open" ).draw();
}); 

$('#closed').on('click', function () {
    dataTables.columns(4).search("Rejected","Approved").draw();
});

The javascript code work well for the #onprogreess button, because it only search for one value Open. How to make it works with two value search?

(#closed button supposed to show record with Rejected or Done Status)

Answer 1

To search multiple values from single column you can use pipeline as below:

dataTable.columns(4).search("Rejected|Done", true, false, true).draw();

You have to pass four parameters as below:

1. Input: Search string to apply to the table
2. Regx: Treat as a regular expression (true) or not (default, false).
3. Smart: Perform smart search (default, true) or not (false). See below for a description of smart searching.
4. CaseInsen: Do case-insensitive matching (default, true) or not (false).

More details

Answer 2

var table = $('#example').DataTable();

table .columns( 4 ) .search("") .draw();