JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.js"></script>
<table id="list_details_livraison" class="striped cell-hovered border bordered" data-searching="true">
     <thead>
         <tr>
             <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.article');?></th>
             <th style="text-align: center;"><?php echo _getText('detaillivraison.entete.qtelivrer');?></th>
             <th style="text-align: center;"></th>
         </tr>
     </thead>
     <tbody>
     </tbody>
</table>

JavaScript

$(document).ready(function() {

     var dt = $('#list_details_livraison').DataTable({
            responsive: true,
            "oLanguage": {
                // switch lang here with a PHP variable 
                "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
            },
            "processing": true,
            "serverSide": true,
            ajax: "<?php  echo RP_SSP ?>server_processing_details_livraisons.php?livc_code=<?php echo $data[0]['livc_code']; ?>",  
            "aoColumnDefs": 
                [
                {
                    "aTargets": [1],
                    "mData": 1,
                    "mRender": function (data, type, full) {
                        return '<div style="text-align:center;">'+ data +'</div>';
                     }
                },
                {
                    "aTargets": [2],
                    "mData": 2,
                    "mRender": function (data, type, full) {
                                if (isDetailLivraisonValider(data)) {
                                    return '<div style="text-align:center;">'+
                                            '<span class="mif-checkmark mif-2x fg-lightGreen"></span>'+
                                          '</div>';
                                } else {
                                    var article = '\''+full [1]+'\'';
                                    return '<div style="text-align:center;">'+
                                            '<a href="../../RestaurantLivraison/modifierDetail/'+ data +'" style="margin-right: 8px;"><span class="mif-pencil mif-2x"></span></a>'+
                                            '<a href="#" id="staticDialog" onclick="afficheDlg(\''+ data +'\','+article+')" style="color:red;"><span class="mif-cross mif-2x"></span></a>'+
                                          '</div>';
                                }
                     }
                }],
                "aLengthMenu": [[10, 25,50,100, -1], [10,...