File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <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.29.2/moment.min.js"></script>
<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/date-1.5.1/fh-3.4.0/r-2.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-1.13.8/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/date-1.5.1/fh-3.4.0/r-2.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
              <div class="col-6 col-lg-2">
                <label
                  for="d_startDate"
                  class="form-label small text-secondary fw-bolder"
                  >Start Date</label
                >
                <input
                  type="text"
                  class="form-control form-control-sm"
                  placeholder="Start Date"
                  id="d_startDate"
                />
            
              </div>
              <div class="col-6 col-lg-2">
                <label
                  for="d_endDate"
                  class="form-label small text-secondary fw-bolder"
                  >End Date</label
                >
                <input
                  type="text"
                  class="form-control form-control-sm"
                  placeholder="End Date"
                  id="d_endDate"
                />
               
              </div>
            </div>
          </div>
    
       <table
  id="example"
  width="100%"
  class="table w-100 dataTable no-footer dtr-inline"
  aria-describedby="dashboardTable_info"
  style="width: 1843px"
>
  <thead>
    <tr>
      <th
        class="all sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 79px"
        aria-label="Reference: activate to sort column ascending"
      >
        Reference
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 82px"
        aria-label="Type: activate to sort column ascending"
      >
        Type
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 160px"
        aria-label="COVERT OR OVERT??: activate to sort column ascending"
      >
        COVERT OR OVERT??
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 198px"
        aria-label="Tasking: activate to sort column ascending"
      >
        Tasking
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 107px"
        aria-label="Start Date: activate to sort column ascending"
      >
        Start Date
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 107px"
        aria-label="End Date: activate to sort column ascending"
      >
        End Date
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 57px"
        aria-label="Status: activate to sort column ascending"
      >
        Status
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 113px"
        aria-label="Internal Status: activate to sort column ascending"
      >
        Internal Status
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 136px"
        aria-label="Lead Engineer: activate to sort column ascending"
      >
        Lead Engineer
      </th>
      <th
        class="sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 170px"
        aria-label="Created By: activate to sort column ascending"
      >
        Created By
      </th>
      <th
        class="sorting sorting_desc"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 107px"
        aria-label="Created Date: activate to sort column ascending"
        aria-sort="descending"
      >
        Created Date
      </th>
      <th
        class="all sorting"
        tabindex="0"
        aria-controls="dashboardTable"
        rowspan="1"
        colspan="1"
        style="width: 119px"
        aria-label="Actions: activate to sort column ascending"
      >
        Actions
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td
        class="dtr-control"
        tabindex="0"
      >
        TSU-12
      </td>
      <td>Work</td>
      <td>Covert</td>
      <td><div>Alarm</div></td>
      <td>15/01/2024 16:20</td>
      <td>20/01/2024 14:03</td>
      <td>Draft</td>
      <td></td>
      <td></td>
      <td>name 1</td>
      <td class="sorting_1">12/01/2024 15:01</td>
      <td>Actions Menu Here</td>
    </tr>
    <tr>
      <td
        class="dtr-control"
        tabindex="0"
      >
        TSU-3
      </td>
      <td>Work Request</td>
      <td>Covert or Overt</td>
      <td>
        <div>CCTV</div>
        <div class="small">Some DIFFERENT Sub Tasking Type</div>
      </td>
      <td>15/01/2024 16:00</td>
      <td>27/01/2024 00:00</td>
      <td>Rejected</td>
      <td></td>
      <td></td>
      <td>name 2</td>
      <td class="sorting_1">11/01/2024 16:44</td>
      <td>Actions Menu Here</td>
    </tr>
    <tr>
      <td
        class="dtr-control"
        tabindex="0"
      >
        TSU-2
      </td>
      <td>Work Request</td>
      <td>Covert or Overt</td>
      <td>
        <div>CCTV</div>
        <div class="small">Some Sub Tasking Type</div>
      </td>
      <td>11/01/2024 16:00</td>
      <td>17/01/2024 00:00</td>
      <td>Installed</td>
      <td></td>
      <td></td>
      <td>name 3</td>
      <td class="sorting_1">11/01/2024 09:57</td>
      <td>Actions Menu Here</td>
    </tr>
    <tr>
      <td
        class="dtr-control"
        tabindex="0"
      >
        TSU-1
      </td>
      <td>Work Request</td>
      <td>Overt</td>
      <td>
        <div>Alarm</div>
        <div class="small">Some Sub Tasking Type</div>
      </td>
      <td>10/01/2024 16:00</td>
      <td>17/01/2024 00:00</td>
      <td>Submitted</td>
      <td>Awaiting</td>
      <td>name4</td>
      <td>name 4.1</td>
      <td class="sorting_1">09/01/2024 17:06</td>
      <td>Actions Menu Here</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 table = new DataTable('#example', {
  
  responsive: true,
        stripeClasses: [],
        orderCellsTop: true,
        destroy: true,
        fixedHeader: true,
        select: {
          toggleable: false,
          info: false,
        },
        searchPanes: {
          initCollapsed: true,
          collapse: true,
          //  layout: "columns-4",
          viewTotal: false,
          dtOpts: {
            select: {
              style: "multi",
            },
            stripeClasses: [],
          },
          orderable: false,
          cascadePanes: true,
          preSelect: [
            {
              rows: ["Submitted"],
              column: 8,
            },
          ],
          
        },
  columnDefs: [
          {
            searchPanes: {
              show: true,
            },
            targets: [1, 2,3,  6, 7],
          },
          {
            searchPanes: {
              show: false,
            },
            targets: [0,  4, 5, 8,9,10,11],
          },
        ],
          dom: "<'row'<'col-sm-12'P>><'.row flex-column flex-md-row align-items-center justify-content-between mb-2'<'.col-auto d-flex justify-content-center justify-content-md-start mb-2 mb-md-0'l><'.col-auto col-md-5 col-lg-3 d-flex justify-content-center mb-2 mb-md-0'f><'.col-auto d-flex justify-content-center justify-content-md-end'B>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
​
});
    
    //variables for dates
​
  var startDateEl = new DateTime("#d_startDate", {
        format: "DD/MM/YYYY",
      });
        var endDateEl = new DateTime("#d_endDate", {
        format: "DD/MM/YYYY",
      });
​
window.DataTable.ext.search.push(function (settings, data, dataIndex) {
        var startDateVal = startDateEl.val();
        var endDateVal = endDateEl.val();
        var startDate = new Date(moment(data[4], "DD/MM/YYYY HH:mm"));
        var endDate = new Date(moment(data[5], "DD/MM/YYYY HH:mm"));
  console.log(startDateVal);
       
        if (
          (startDateVal === null && endDateVal === null) ||
          (startDateVal != null &&
            endDateVal === null &&
            startDate >= startDateVal) ||
          (endDateVal != null && startDateVal === null && endDate <= endDateVal)
        ) {
          return true;
        }
      });
​
​
​
​
//date change listener
 document.querySelectorAll(
        "#d_endDate, #d_startDate"
      ).forEach(function(el) {
        el.addEventListener("change", function(el)  {
          table
            .draw();
            
        });
      });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers