File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <!-- from datatables official download -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.0/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.7/css/autoFill.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.4/css/colReorder.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.1/css/dataTables.dateTime.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.3/css/fixedColumns.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.6.4/css/keyTable.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.5/css/scroller.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchbuilder/1.2.0/css/searchBuilder.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/searchpanes/1.4.0/css/searchPanes.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/autofill/2.3.7/js/dataTables.autoFill.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.colVis.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.4/js/dataTables.colReorder.js"></script>
<script type="text/javascript" src="https://nightly.datatables.net/datetime/js/dataTables.dateTime.js?aflshbvasjdnbf"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.3/js/dataTables.fixedColumns.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.6.4/js/dataTables.keyTable.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.5/js/dataTables.scroller.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchbuilder/1.2.0/js/dataTables.searchBuilder.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/searchpanes/1.4.0/js/dataTables.searchPanes.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.js"></script>
​
​
​
    <!-- latest plugins and libs version-->
    <!-- latest moment.js lib -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <!-- sorting datetimes  -->
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.0/sorting/datetime-moment.js"></script>
    <!-- datarender datetime -->
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.0/dataRender/datetime.js"></script>
    
​
    <!-- <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>    -->
    
    <!-- <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> -->
    <!-- <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> -->
​
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> -->
    <!-- <script src="https://cdn.datatables.net/plug-ins/1.10.19/dataRender/datetime.js"></script> -->
​
​
    
    <meta charset=utf-8 />
<!--
Created using JS Bin
http://live.datatables.net
​
Copyright (c) 2021 by anonymous (http://live.datatables.net/jevehada/1/edit)
​
Released under the MIT license: http://jsbin.mit-license.org
-->
    <title>DataTables - JS Bin</title>
  
<style id="jsbin-css">
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
</style>
​
​
</head>
  <body>
    <div class="container">
​
        <!-- <table border="0" cellspacing="5" cellpadding="5">
            <tbody><tr>
                    <td>Minimum date:</td>
                    <td><input type="text" id="min" name="min"></td>
                </tr>
                <tr>
                    <td>Maximum date:</td>
                    <td><input type="text" id="max" name="max"></td>
                </tr>
            </tbody>
        </table> -->
​
​
      <table id="example" class="display nowrap" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>25/01/2011 15:15</td>
                <td>$112,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Alex Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>25/01/2011 15:20</td>
                <td>$100,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>28/11/2008 17:50</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>02/12/2012 08:00</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>06/08/2012 06:50</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>14/10/2010 20:20</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>15/09/2009 21:45</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>13/12/2008 10:36</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>19/12/2008 11:55</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>03/03/2013 14:40</td>
                <td>$342,000</td>
            </tr>
​
            <tr>
                <td></td>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>25/01/2011 15:15</td>
                <td>$112,000</td>
            </tr>            
        </tbody>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
      </table>
    </div>
​
  <script>
​
​
​
/* Custom filtering function which will search data in column four between two values */
var minDate, maxDate;
var tableNode ; 
const dateTimeindex = 5;
​
​
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        if (settings.nTable !== tableNode) {
            return true;
        }        
        var min = minDate.val();
        var max = maxDate.val();
        var min_parse = moment( min) ; 
        var max_parse = moment( max) ; 
​
        console.log ("min: "+ moment(min_parse).format()  + " raaw: " + min );
        console.log ("max: "+ moment(max_parse).format()  + " raaw: " + max );
​
        console.log ("curr_valid: "+ moment( data[dateTimeindex], 'DD/MM/YYYY HH:mm' ).isValid());
​
        var date = moment( data[dateTimeindex], 'DD/MM/YYYY HH:mm' ) ; 
​
        console.log ("moment: "+ date  + " raaaw: " + data[dateTimeindex]);
//        console.log ("greater: "+ (min <= date));
​
        if (
            moment( date ).isValid() && (
            ( min === null && max === null ) ||
            ( min === null && date <= max_parse ) ||
            ( min_parse <= date   && max === null ) ||
            ( min_parse <= date   && date <= max_parse ))
        ) {
            console.log ("In: "+ moment(date).format());
            return true;
        } 
        console.log ("Out: "+ moment(date).format());
        return false;        
    }
);
​
​
​
$(document).ready(function() {
    
  
    //moment.updateLocale(moment.locale(), { invalidDate: "Invalid Date" });
    $.fn.dataTable.moment( 'DD/MM/YYYY HH:mm' );
​
    var table = $('#example').DataTable({
        pagingType: "full_numbers", // Paginacion completa 
        stateSave: true ,  // Guardar estado de la tabla, existe un bug con stateSave y panes.Show
        select: true,  // Habilitar seleccion
        dom: 'Bl<"toolbar">frtlip', // Disposicion de DOM, Blfrtlip
        buttons: [   // Botones de exportar
            'csv', 'excel',            
            {
                extend: 'searchPanes',
                text: 'Filtros',
            }      
            ],
        searchPanes: {
            // ViewTotal: true,
            //columns: [0], // en que columnas habilitar filtros, no siempre funciona ya que depende de threshold 
            cascadePanes: true, // Seleccion en cascada 
            //threshold: 0
        },                 
​
        // language: { // Idioma
        //     url: "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json",
        //     searchPanes: {
        //       clearMessage: 'Limpiar filtros',
        //       collapse: { 0: 'Filtrar', _: 'Filtros Activos (%d)' }
        //     }
        // },
        columnDefs: [
            //{ "type": "date", "targets": 5 },
            {
                searchPanes: {
                    show: true
                },
                targets: [0,1,2,3,4,5]
            },
            // {
            //     searchPanes: {
            //         show: false
            //     },
            //     targets: [1,2,3,7,8,9,10]
            // },
            {
                targets: dateTimeindex,
                    render: function (data) {
                        //console.log (data);
                        return moment(data, 'DD/MM/YYYY HH:mm:ss').format('DD/MM/YYYY HH:mm')        //YYYY/MM/DD                                     
                    }
            },
            {
            searchable: false,
            orderable: false,
            targets: 0
            }            
        ],        
        order: [[ 1, 'asc' ]],    
        
      
          
​
    });
​
    // Custom 
    $("div.toolbar").html(' Fecha Inicio: <input type="hidden" id="min" name="min"> Fecha fin: <input type="text" id="max" name="max">');
​
​
    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'DD/MM/YYYY',
        buttons: {
            today: true,
            clear: true
        }        
    });
    maxDate = new DateTime($('#max'), {
        format: 'DD/MM/YYYY',
        buttons: {
            today: true,
            clear: true
        }   
    });
​
    // Global node object of the table, 
    // related to filter/search + panes issue
    // https://datatables.net/forums/discussion/comment/175787/#Comment_175787
    tableNode = table.table().node();
​
​
    /* Table hover column highlight, row is enabled by default*/
    jQuery('#table_main tbody')
        .on( 'mouseenter', 'td', function () {
            if (table.cell(this).index() !== undefined) { // Any scope
                var colIdx = table.cell(this).index().column;
​
                jQuery( table.cells().nodes() ).removeClass( 'highlight' );
                jQuery( table.column( colIdx ).nodes() ).addClass( 'highlight' );
            }
​
    } );    
​
    // Event listener to the two range filtering inputs to redraw on input keyup
    // $('#min, #max').keyup( function() {
    //     table.draw();
    // } );    
​
    // Refilter the table on date picker change, detecta si el input se ha borrado y lo setea en null
    $('#min, #max').on('change', function () {
        if( isEmpty(this.value) ) {
            console.log( "Field is Empty" ); 
            if( this.id == "min") { 
                minDate.val(null);  
            } else {
                maxDate.val(null);  
            }
        } else {
            console.log( `NAME value is: ${this.value}` );
        }              
        table.draw();
    });    
​
    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();    
​
} );
​
​
​
/* Para detectar si un campo input está vacío o se borró manualmente */
function isEmpty(str) {
    return !str.trim().length;
}
​
​
</script>
​
</body>
​
<style>
/* table hover column highlight*/
td.highlight {
  background-color: whitesmoke !important;
}
​
​
div#example_length {
    margin: 0px 10px;
    padding-top: 5px;
}
​
.toolbar {
    padding-top: 8px;
}
​
</style>
​
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers