JSFiddle - React, Tailwind, and code Playground

by kakashi99

HTML

<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<div id="contents" class="invisible">
<table id="liste_dossiers" class="dataTable">
        <thead>
            <tr>
			<th class="ui-state-default" style="width: 5%;">Date modif.</th>
			<th class="ui-state-default" style="width: 5%;">N&deg; dossier</th>
			<th class="ui-state-default" style="width: 4%;">R&eacute;gion</th>
			<th class="ui-state-default" style="width: 4%;">Dep</th>
			<th class="ui-state-default" style="width: 4%;">Collectivit&eacute;</th>
			<th class="ui-state-default" style="width: 5%;">N&deg; Agent</th>
            </tr>
        </thead>
        
        <tbody>
           
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
               ...

JavaScript

$(document).ready(function(){
    $('#liste_dossiers').dataTable({
        "bPaginate" : true,
        "bLengthChange" : true,
        "bFilter" : true,
        /*"sPaginationType" : "two_button", // "full_numbers",*/
        "bSort" : true,
        /*"order" : 'desc',*/
        "bInfo" : true,
        "bAutoWidth" : true,
        "bJQueryUI" : true,
        "bDestroy" : false,
        "bRetrieve" : true,
        "sDom" : '<lipf>t', // enlever pour retrouver la mise en forme originale avec les blocs gris en haut et en bas
        "aaSorting" : [[0 , 'desc']],
        "aoColumns" : [{
            "sType" : "date-uk"
        }, { "bSortable": false }, 
        { "bSortable": false }, { "bSortable": false }, 
        { "bSortable": false }, { "bSortable": false }]
    });
    
    $('#blop').click(function(){
        var filtre = $('#filtreRecherche').val();
 
        $('#liste_dossiers_filter input').val(87).trigger('search');
    });
});