File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/datetime/1.0.3/css/dataTables.dateTime.min.css" rel="stylesheet" />
    
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/datetime/1.0.3/js/dataTables.dateTime.min.js"></script>
    
    <script src="https://cdn.datatables.net/plug-ins/1.10.24/dataRender/datetime.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/api/fnFilterClear.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <button class="clear">CLEAR</button>
    <div class="container">
      <div id="selectRiskRange" border="0" cellspacing="5" cellpadding="5">
            <div>
                    <div>Minimum #:</td>
                    <div><input type="text" id="minRisk" name="min"></div>
                
                    <div>Maximum #:</td>
                    <div><input type="text" id="maxRisk" name="max"></div>
                </div>
        </div>
        <div id="selectDateRange" border="0" cellspacing="5" cellpadding="5">
            <div>
                    <div>Minimum date:</td>
                    <div><input type="text" id="minDate" name="minDate"></div>
                
                    <div>Maximum date:</td>
                    <div><input type="text" id="maxDate" name="maxDate"></div>
                </div>
        </div>
      <div id="select-dropdown">
        -->> select dropdown plug-in here <<---
      </div>
      <table id="example" class="display nowrap" width="100%">
        <thead class="filter-head">
                <tr>
                    <th>Risk Score</th>
                    <th>Position</th>
                    <th>Title</th>
                    <th>ID</th>
                    <th>Date</th>
                    <th>Dollars</th>
                    <th>HTML for modal</th>
                    <th>HTML for modal</th>
                    <th>HTML for modal</th>
                    <th>HTML for modal</th>
                    <th>HTML for modal</th>
                </tr>
            </thead>
​
        <tbody>
          <tr>
            <td>1</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>2</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>4.5</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>3.2</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>6.8</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>5</td>
            <td>Integration Specialist</td>
            <td>San Francisco</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>8.4</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$4,080</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>10</td>
            <td>Integration Specialist</td>
            <td>Edinburgh</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$6,730</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
          <tr>
            <td>N/A</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$5,000</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
            <td>Modal Content (hidden)</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</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
 
  var minDate, maxDate;
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var minRiskScore = parseInt( $('#minRisk').val(), 10 );
        var maxRiskScore = parseInt( $('#maxRisk').val(), 10 );
        var risk = parseFloat( data[0] ) || 0;
​
        var minDateTime = minDate.val();
        var maxDateTime = maxDate.val();
        var date = new Date( data[4] );
 
        var withinRisk = ( 
          ( isNaN( minRiskScore ) && isNaN( maxRiskScore ) ) ||
          ( isNaN( minRiskScore ) && risk <= maxRiskScore ) ||
          ( minRiskScore  <= risk  && isNaN( maxRiskScore  ) ) ||
          ( minRiskScore  <= risk  && risk <= maxRiskScore  ) 
      );
      
      var withinDates = (
          ( minDateTime === null && maxDateTime === null ) ||
          ( minDateTime === null && date <= maxDateTime ) ||
          ( minDateTime <= date  && maxDateTime === null ) ||
          ( minDateTime <= date  && date <= maxDateTime )
      ); 
      
      if (withinRisk && withinDates)  {
        return true;
      } else {
        return false; 
      }
    }
);
​
(function( factory ) {
    "use strict";
 
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                root = window;
            }
 
            if ( ! $ ) {
                $ = typeof window !== 'undefined' ?
                    require('jquery') :
                    require('jquery')( root );
            }
 
            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}
(function( $, window, document ) {
 
 
$.fn.dataTable.render.moment = function ( from, to, locale ) {
    // Argument shifting
    if ( arguments.length === 1 ) {
        locale = 'en';
        to = from;
        from = 'YYYY-MM-DD';
    }
    else if ( arguments.length === 2 ) {
        locale = 'en';
    }
 
    return function ( d, type, row ) {
        if (! d) {
            return type === 'sort' || type === 'type' ? 0 : d;
        }
 
        var m = window.moment( d, from, locale, true );
 
        // Order and type get a number value from Moment, everything else
        // sees the rendered value
        return m.format( type === 'sort' || type === 'type' ? 'x' : to );
    };
};
 
 
}));
​
​
​
$(document).ready( function () {
  minDate = new DateTime($('#minDate'), {
        format: 'DD MMMM YYYY'
    });
    maxDate = new DateTime($('#maxDate'), {
        format: 'DD MMMM YYYY'
    });
  var table = $('#example').DataTable({
    initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );
            } );
        },
    columnDefs: [
        { targets: [4], render: $.fn.dataTable.render.moment( 'YYYY/MM/DD','D MMMM YYYY', 'en' )},
        { targets: [5,6,7,8,9,10], visible: false }
    ]
  });
  $('.clear').on('click', function(){
      $('input').val('');
      table.search( '' ).columns().search( '' ).draw();
    });
  $('#minRisk, #maxRisk').keyup(function() {
        table.draw();
    });
    $('#minDate, #maxDate').on('change', function () {
        table.draw();
    });
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers