JSFiddle - React, Tailwind, and code Playground

by jezrael

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<button id="filter">Outside - filter</button>
<button id="filter1">Outside - reload</button>
<table id="example">
    <thead>
      <tr>
          <th>c06</th>
          <th>c07</th>
          <th>c08</th>
          <th>c09</th>
          <th>c10</th>
          <th>c12</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JavaScript

table =  $('#example').DataTable( {
        "ajax": {
            "url": "https://api.myjson.com/bins/2zgo2",
            "dataSrc": "data"
        },
        dom: 'Bt',
        buttons: [
        {
            text: 'Buttons - filter',
            action: function ( e, dt, node, config ) {
                var data = dt.ajax.json();
                var newdata = $.grep( data.data, function( n, i ) {
                    return n.c12==='dokonané';
                });
                console.log(newdata);
                console.log(dt.data());                
                dt.data(newdata);
            }
        },
        {
            text: 'Buttons - reload',
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
        }            
       ],
        "columns": [
            { "data": "c06" },
            { "data": "c07" },
            { "data": "c08" },
            { "data": "c09" },
            { "data": "c10" },
            { "data": "c12" }
        ]
    } );

$("#filter").click(function() {
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            return (data[5] == 'dokonané')
                ? true
                : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
});
$("#filter1").click(function() {
     table.draw();
});