JSFiddle - React, Tailwind, and code Playground

by Ratan Paul

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="https://rawgit.com/vedmack/yadcf/master/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vedmack/yadcf/master/jquery.dataTables.yadcf.css">
<title>yadcf - Yet Another DataTables Column Filter</title>
</head>
<body id="yadcf_example">
    <div id="container">
         <h1>Yet Another DataTables Column Filter - (yadcf) example</h1>

        <div id="external_filter_container_wrapper">
            <label>External filter for "Numbers" column :</label>
            <div id="external_filter_container"></div>
        </div>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th>Genere</th>
                    <th>Nome</th>
                    <th>Descrizione</th>
                    <th>Anno</th>
                    <th>Tags</th>
                </tr>
            </thead>
            <tbody>
                <tr class="odd gradeA">
                    <td>Musica</td>
                    <td>Andrea Chenier (1970)</td>
                    <td class="r1">Fausto Cleva, Placido Domingo, Jean Kraft, Renata Tebaldi, Judith Forst, Anselmo Colzani</td>
                    <td>1987</td>
                    <td class="r2"><span class="label lightblue">Opera</span><span class="label lightblue">Giordano</span>

                    </td>
                </tr>
                <tr class="odd gradeA">
                    <td>Musica</td>
          ...

CSS

.label {
    padding: 0px 5px 0px 5px;
    border: 1px solid black;
    -moz-border-radius: 1em;
    /* for mozilla-based browsers */
    -webkit-border-radius: 1em;
    /* for webkit-based browsers */
    border-radius: 1em;
    /* theoretically for *all* browsers*/
}
.label2 {
    padding: 0px 5px 0px 5px;
    -moz-border-radius: 1em;
    /* for mozilla-based browsers */
    -webkit-border-radius: 1em;
    /* for webkit-based browsers */
    border-radius: 1em;
    /* theoretically for *all* browsers*/
}
.label4 {
    padding: 0px 5px 0px 5px;
    border: 1px solid black;
    -moz-border-radius: 1em;
    /* for mozilla-based browsers */
    -webkit-border-radius: 1em;
    /* for webkit-based browsers */
    border-radius: 1em;
    /* theoretically for *all* browsers*/
}
.label.lightblue {
    background-color: #99CCFF;
}
.label2.lightblue2 {
    background-color: #FFF;
}
.label4.lightblue4 {
    background-color: pink;
}
#external_filter_container_wrapper {
    margin-bottom: 20px;
}
#external_filter_container {
    display: inline-block;
}

JavaScript

var oTable;
$(document).ready(function () {
    oTable = $('#example').dataTable().yadcf([{
        column_number: 0
    }, {
        column_number: 3,
        filter_type: "range_number_slider",
        filter_container_id: "external_filter_container"
    }, {
        column_number: 2,
        text_data_delimiter: ",",
        filter_type: "auto_complete"
    }, {
        column_number: 1,
        text_data_delimiter: ",",
        filter_type: "auto_complete"
    }, {
        column_number: 4,
        column_data_type: "html",
        html_data_type: "text",
        filter_default_label: "Select tag",
        filter_type: "auto_complete"
    }]);

    $('#example').on('click', ".label.lightblue", function () {
        alert('onclick label');
        yadcf.exFilterColumn(oTable, [
            [4, $(this).text()]
        ]);

    });

    $('#example').on('click', ".label4.lightblue4", function () {
        alert('onclick label4');
        yadcf.exFilterColumn(oTable, [
            [4, $(this).text()]
        ]);

    });

    $('#example').on('click', ".label2.lightblue2", function () {
        alert('onclick label2');
        yadcf.exFilterColumn(oTable, [
            [2, $(this).text()]
        ]);

    });
});