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://cdn.datatables.net/1.11.0/css/jquery.dataTables.min.css" rel="stylesheet" />
​
    <link href="https://cdn.datatables.net/searchpanes/1.3.0/css/searchPanes.dataTables.min.css" rel="stylesheet" />
​
    <link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/2.0.0/css/buttons.dataTables.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.5.1.js" ></script>
    <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/searchpanes/1.2.1/js/dataTables.searchPanes.js" ></script> <!--https://cdn.datatables.net/searchpanes/1.1.1/js/dataTables.searchPanes.min.js-->
​
    <script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js" ></script>
    <script src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" ></script>
    <script src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" ></script>
    
    <meta charset=utf-8 />
    
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display cell-border" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>End Date</th>
            <th>Project</th>
            <th>Country</th>
            <th>Customer</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>End Date</th>
            <th>Project</th>
            <th>Country</th>
            <th>Customer</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td> Technical Author</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
            <td>Some kind of really long text which I am just making up to test if this is working or not, but in reality I am not sure what I am typing and maybe I should've just used Irem Lipsum but now I am just typing a really long sentence ohwell...</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
​
}
​
JavaScriptSaved
 
$(document).ready(function() {
    $('#example').DataTable({
      autoWidt: true,
      responsive:true,
        searchPanes: {
          show: true,
          cascadePanes: true,
            layout: 'columns-7'
        },
        dom: 'B Plfrtip',
        columnDefs: [
            {
                searchPanes: {
                    show: true,
                    cascadePanes: true,
                },
                config:{
                        cascadePanes: true,
                },
                targets: [0, 1, 2, 3, 4, 5,6,7]
            }
        ],
        "lengthMenu": [[5, 15, 50, -1], [5, 15, 50, "All"]],
        buttons: [
          {
          extend:  'print',
          exportOptions:{
            stripHtml: false,
            columns: ':visible',
          }
          }
​
        ],
​
    });
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers