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)

Sandip - Frontend Developer · Accepted Answer · 2018-03-05 13:07:02Z

21

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:

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

More details

edited Mar 5, 2018 at 13:07

answered Aug 8, 2016 at 8:28

Sandip - Frontend Developer

14.7k5 gold badges38 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

destinydz · Accepted Answer · 2017-12-01 21:07:42Z

1

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

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

answered Dec 1, 2017 at 21:07

destinydz

2413 silver badges4 bronze badges

Collectives™ on Stack Overflow

Custom filtering With Button for Datatable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related