File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  
  <link href="https://cdn.datatables.net/v/dt/dt-2.1.8/r-3.0.3/datatables.min.css" rel="stylesheet">
  <link href="https://cdn.datatables.net/responsive/3.0.3/css/responsive.dataTables.css" rel="stylesheet">
   
  <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>  
  <script src="https://cdn.datatables.net/responsive/3.0.3/js/dataTables.responsive.js"></script>  
  <script src="https://cdn.datatables.net/responsive/3.0.3/js/responsive.dataTables.js"></script>  
  
  <script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.js"></script>    
  <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.dataTables.js"></script>    
  <script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>    
  <script src="https://itpmo.mativ.com/assets/js/jquery-ui.js"></script>    
    <script src="https://itpmo.mativ.com/global_assets/js/plugins/ui/moment/moment.min.js"></script>  
  <script src="https://itpmo.mativ.com/global_assets/js/plugins/pickers/daterangepicker.js"></script>    
  
  
  <script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>
  
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
  <body>
      <div class="row">
      <div class="col-lg-12">
          <div class="card">
              <div class="card-body">
                  <div class="table-responsive">
                     <div class="container">
      <table id="main-table" class="table datatable-responsive" width="100%">
        <thead>
    <tr>
        <th>
    IT Project Portfolio
</th>
​
<th>
    Overall Status
</th>
<th>
    Project Name
</th>
<th>
    Delivery Lead
</th>
<th>
    IT Project Manager
</th>
<th>
    Scope Status
</th>
<th>
    Timeline Status
</th>
<th>
    Budget Status
</th>
<th>
    Target Go-Live
</th>
<th>
    Phase
</th>
​
        
      
    </tr>
        </thead>
        <tbody>
    <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Nixon</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
               
            </tr>
              <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Garrett</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
               
            </tr>
           <tr>
                <td> Sustainable &amp; Adhesive Solutions</td>
                <td>Ashton</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
              
            </tr>
          <tr>
                <td>Supply Chain + Operations</td>
                <td>Ashton</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
            </tr>
          <tr>
                <td>Supply Chain + Operations</td>
                <td>Cedric</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
             
            </tr>
           <tr>
                <td>Finance</td>
                <td>Cedric</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
              
            </tr>
          <tr>
                <td>Finance</td>
                <td>Airi</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
                
               
            </tr>
          <tr>
                <td>IT Internal</td>
                <td>Brielle</td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>On Track </td>
                <td>  Initiation</td>
                <td>Test Name 1</td>
                <td>Test Name 2</td>
                <td>Test Name 3</td>
               
               
                
            </tr>
        </tbody>
​
      </table>
    </div>
                </div>
            </div>
        </div>
        </div>
    </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;
}
​
 .ui-datepicker-trigger {
     position: absolute;
     top: 15px;
     left: 130px;
     z-index: 4;
     padding: 6px;
     cursor: pointer;
 }
 .dt-search {
     float: right !important;
     margin: 1.5rem 1.5rem 1.25rem 1.25rem !important
 }.dtr-control {
  text-align: right;
}
JavaScriptSaved
 
​
  
  var groupColumn = 0;
   $(document).ready(function () {
     
     let toolbar = document.createElement('div');
     toolbar.innerHTML = '<div class="filter-date-range-picker"><input class="form-control form-control-sm" id="date_range" type="text" placeholder="Select dates" style="width: 230px; margin-right: 10px;"></div>'; 
​
      
     
       //Generate filter inputs and apply filter.
       var table = $('#main-table').DataTable({
       columnDefs: [
    {
        className: 'dtr-control arrow-left',
        orderable: false,
        target: 1
    },
    {
​
        target: 5, width: '12%'
    },
    {
​
        target: 6, width: '12%'
    },
    {
​
        target: 7, width: '5%'
    }
],
    responsive: {
        details: {
            type: 'column',
            target: 1
        }
    },
        
           orderCellsTop: true,
           fixedHeader: true,
           pageLength: 50,
           layout: {
             topStart: 'buttons',
             topEnd: [ toolbar, 'search' ]
           },
           rowsGroup: [
               0,
           ],
           buttons: {
               dom: {
                   button: {
                       className: 'dt-button button-page-length btn btn-secondary'
                   }
               },
               buttons: [
                   {
​
                       extend: 'excelHtml5',
                       className: 'btn btn-secondary',
                       exportOptions: {
                           columns: [14, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                       },
                       title: "",
                       filename: "All Projects List"
                   },
                   'pageLength'
               ]
           },
           
           "order": [[groupColumn, "asc"]],
           "oLanguage": {
               "sEmptyTable": "No data available."
           },
         initComplete: function () {
           
               
               
        
         }
         
       });
​
      var dateRangeStart, dateRangeEnd;
​
//$("#dt-search").prepend('<div class="filter-date-range-picker"><input class="form-control form-control-sm" id="date_range" type="text" placeholder="Select dates" style="width: 230px; margin-right: 10px;"></div>');
​
$("#date_range").daterangepicker({
    autoUpdateInput: false,
    locale: {
        "format": "MM/DD/YYYY",
        "cancelLabel": "Clear",
    }
});
​
$("#date_range").on('apply.daterangepicker', function (ev, picker) {
    dateRangeStart = moment(picker.startDate.format('MM/DD/YYYY'), 'MM/DD/YYYY');
    dateRangeEnd = moment(picker.endDate.format('MM/DD/YYYY'), 'MM/DD/YYYY');
    $(this).val(dateRangeStart.format('MM/DD/YYYY') + ' to ' + dateRangeEnd.format('MM/DD/YYYY'));
​
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        let min = dateRangeStart;
        let max = dateRangeEnd;
        let date = new Date(data[4]);
​
        if (
            (min === null && max === null) ||
            (min === null && date <= max) ||
            (min <= date && max === null) ||
            (min <= date && date <= max)
        ) {
            return true;
        }
        return false;
​
    });
​
    table.draw();
});
​
$("#date_range").on('cancel.daterangepicker', function (ev, picker) {
    dateRangeStart = dateRangeEnd = null;
    $(this).val('');
    table.draw();
});
​
​
$('#range').on('change', table.draw);
$('#range').change();
​
​
​
​
table.buttons().container()
    .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
​
​
​
$(".dataTables_length select").addClass('form-select form-select-sm');
​
//Set datepicker
$(".datepicker").datepicker({
    format: 'MM/dd/yyyy'
});
​
//Open calander when click on icon.
$('.date-icon').on('click', function () {
    $('.datepicker').focus();
});
​
   });
​
​
4 warnings
Line 6: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 101: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 102: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 103: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers