File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
​
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/searchpanes/2.0.1/css/searchPanes.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
​
    <title>Hello, world!</title>
  </head>
  <body>
    
    
    <div class="">
      <table class="table" id="dtable">
        <thead>
          <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>F</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
          </tr>
          <tr>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>1</td>
          </tr>
          <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
        </tbody>
      </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/searchpanes/2.0.1/js/dataTables.searchPanes.js"></script>
<script src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
​
 
    
  </body>
</html>
CSSSaved
 
html, body {
  height: 100%;
}
JavaScriptSaved
 
 $("#dtable").DataTable({
          
                buttons: [{
                    extend: 'searchPanes',
                    config: {
                         threshold: 1
                    }
                }],
        dom: 'Bfrtip'
        });
Output

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers