File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<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/r-2.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<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/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-sm-12"><table id="example" class="table dataTable no-footer dtr-inline" aria-describedby="dashboardTable_info" style="width: 1801px;">
            <thead>
              <tr><th class="all sorting" tabindex="0" aria-controls="dashboardTable" rowspan="1" colspan="1" style="width: 76px;" aria-label="Reference: activate to sort column ascending">Reference</th><th class="sorting" tabindex="0" aria-controls="dashboardTable" rowspan="1" colspan="1" style="width: 79px;" aria-label="Type: activate to sort column ascending">Type</th><th class="sorting" tabindex="0" aria-controls="dashboardTable" rowspan="1" colspan="1" style="width: 156px;" 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: 193px;" aria-label="Tasking: activate to sort column ascending">Tasking</th><th class="sorting" tabindex="0" aria-controls="dashboardTable" rowspan="1" colspan="1" style="width: 104px;" 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: 104px;" 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: 55px;" aria-label="Status: activate to sort column ascending">Status</th><th class="sorting" tabindex="0" aria-controls="dashboardTable" rowspan="1" colspan="1" style="width: 110px;" 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: 132px;" 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: 165px;" 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: 104px;" 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: 115px;" aria-label="Actions: activate to sort column ascending">Actions</th></tr>
            </thead><tbody><tr><td class="dtr-control" tabindex="0">REF-1</td><td>Work Request</td><td>Overt</td><td><div>Alarm</div><div class="small">Some Sub Tasking Type</div></td><td class="" style="">10/01/2024 16:00</td><td class="" style="">17/01/2024 00:00</td><td class="" style="">Submitted</td><td class="" style="">Awaiting</td><td class="" style="">Some </td><td class="" style="">Name</td><td class="sorting_1" style="">09/01/2024 17:06</td><td>Actions Menu Here</td></tr></tbody>
          </table></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;
}
​
JavaScriptSaved
 
​
var table = new DataTable('#example',{
        responsive: true,
        stripeClasses: [],
        orderCellsTop: true,
        destroy: true,
       fixedHeader: true,
        select: {
          toggleable: false,
          info: false
        },
        searchPanes: {
          layout: "columns-3",
          initCollapsed: true,
          collapse: true,
          
          viewTotal: false,
          dtOpts: {
            select: {
              style: "multi",
            },
            stripeClasses: []
          },
          orderable: false,
          cascadePanes: true
                   
        },
        language: {
          emptyTable: 'No matching records found',
          searchPanes: {
            title: false
          },
          paginate: {
            previous: "<",
            next: ">",
          },
          searchPlaceholder: 'Search...',
          search:
            '<div class="input-group border rounded-pill"><span class="input-group-text rounded-end rounded-5 border-0 bg-secondary-subtle text-dark"><i class="bi bi-search"></i></span>',
        },
        mark: {
          accuracy: "complementary",
          separateWordSearch: false,
        },
        lengthMenu: [
          [15, 25, 50, -1],
          [15, 25, 50, "All"],
        ],
        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>>",
        
        //created date order
        order: [10, "desc"],
        columnDefs: [
          {
            searchPanes: {
              show: true,
            },
            targets: [1, 2, 3, 4, 5, 6, 7],
          },
          {
            searchPanes: {
              show: false,
            },
            targets: [0, 8, 9, 10, 11],
          },
        ]
        
​
});
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers