File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.1/datatables.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
<div id="carouselExampleDark" class="carousel carousel-dark " data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="20000">
          <img src="https://htmlburger.com/blog/wp-content/uploads/2021/02/lets-talk-about-bootstrap.png" class="d-block w-50">
    </div>
    <div class="carousel-item" data-bs-interval="20000">
          <div class="card rounded shadow border-0">
            <div class="card-header p-0">
              <h5 class="fw-bold mt-2 text-center">Chat Handled</h5>
            </div>
            <div class="card-body bg-white rounded">
              <table id="chat-dash2" class="table table-sm display responsive" style="width: 100%">
                <thead>
                  <tr>
                    <th>Chat Queue</th>
                    <th>Queued</th>
                    <th>Oldest</th>
                  </tr>
                </thead>
                    <tbody>
                      <tr>
                        <td>Tech English</td>
                        <td>10</td>
                        <td>08:15:22</td>
                      </tr>
                      <tr>
                        <td>Tech Priority</td>
                        <td>5</td>
                        <td>04:25:10</td>
                      </tr>
                      <tr>
                        <td>Tech Japan</td>
                        <td>2</td>
                        <td>11:10:03</td>
                      </tr>
                    </tbody>
              </table>
            </div>
          </div>
    </div>
  </div>
</div>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
$(document).ready( function () {
var chat_handled_table = $('#chat-dash2').DataTable({
    dom: 'lrt',
    order: [[1, 'desc']],
    responsive: true,
    lengthChange: false,
    info: false,
    searching: false,
    ordering: true,
    scrollY: "20vh",
    scrollCollapse: true,
});
​
  
  var myCarousel = document.getElementById('carouselExampleDark')
  
myCarousel.addEventListener('slid.bs.carousel', function () {
    $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
})
​
​
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers