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="container">
      <table id="main-table" class="table datatable-responsive" width="100%">
        <thead>
    <tr>
        <th>
            Business Unit
        </th>
​
        <th>
            Project Name
        </th>
        <th>
            Overall Status
        </th>
        <th>
            Scope Status
        </th>
        <th>
            Timeline Status
        </th>
        <th>
            Budget Status
        </th>
        <th>
            Phase
        </th>
        <th>
            Business Sponsor
        </th>
        <th>
            Proj Lead
        </th>
        <th>
            Delivery Lead
        </th>
        <th>
            IT Capabilities
        </th>
        <th>
            Capex
        </th>
        <th>
            Last Update
        </th>
        <th>
            Completion Date
        </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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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>
                <td>Support Digital Brand</td>
                <td>Yes</td>
                <td>12/12/2023</td>
                <td>12/12/2023</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;
}
​
 .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>'; 
​
       $('#main-table thead tr')
      .clone(true)
      .addClass('filters')
      .appendTo('#main-table thead');
     
       //Generate filter inputs and apply filter.
       var table = $('#main-table').DataTable({
        columnDefs: [
        {
            className: 'dtr-control arrow-right',
            orderable: false,
            target: 1
        }
    ],
    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 api = this.api();
                $("th").removeClass('sorting_asc'); //remove sorting_asc class that gets stuck on first column
                // For each column
                api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                // Set the header cell to contain the input element
                var cell = $('.filters th').eq(
                $(api.column(colIdx).header()).index()
                );
                var title = $(cell).text();
                if ($(api.column(colIdx).header()).index() >= 0) {
               
                    $(cell).html('<input type="text" class="form-control" style="font-size:12px;" placeholder="Search" />');
                
                }
​
            // On every keypress in this input
            $(
                'input',
                $('.filters th').eq($(api.column(colIdx).header()).index())
            )
                .off('keyup change')
                .on('change', function (e) {
                    // Get the search value
                    $(this).attr('title', $(this).val());
                    var regexr = '({search})'; //$(this).parents('th').find('select').val();
​
                    var cursorPosition = this.selectionStart;
                    // Search the column for that value
                    api
                        .column(colIdx)
                        .search(
                            this.value != ''
                                ? regexr.replace('{search}', '(((' + this.value + ')))')
                                : '',
                            this.value != '',
                            this.value == ''
                        )
                        .draw();
                })
                .on('keyup', function (e) {
                    e.stopPropagation();
                    $(this).trigger('change');
                    //$(this).focus()[0];
                    //.setSelectionRange(cursorPosition, cursorPosition);
                });
        });
        
         }
         
       });
​
      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();
});
​
   });
​
​
8 warnings
Line 6: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 102: Use '!==' to compare with ''.
Line 103: Bad line breaking before '?'.
Line 105: Use '!==' to compare with ''.
Line 106: Use '===' to compare with ''.
Line 140: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 141: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 142: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers