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="js/datatables-simple-demo.js"></script> -->
    <!-- <script src="js/print.js"></script> -->
    <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></td>
            <td></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></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></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>Test</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 {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready(function() {
  var dataTable =  $('#example').DataTable({
        searchPanes: {
          show: true,
          cascadePanes: true,
            layout: 'columns-5'
        },
        dom: 'B Plfrtip',
        
        columnDefs: [
            {
​
                searchPanes: {
                  orthogonal:'sp',
                    show: true,
                    cascadePanes: true,
                },
​
                config:{
                        cascadePanes: true,
                },
                targets: [0, 1, 2, 3, 4, 5]
            },
            {
              orderable: false,
    
              targets: [0,1],
              render: function ( data, type, row, meta ) {
                            
              
            if( data == ""){
               
                return data = "yay", "<input type='checkbox' name='yay' unchecked />" + data ;
                }
                else return data="pis", "<input type='checkbox' name='pis' unchecked />"+ data;
                }
            },
        ],
        select: {
    style:    'multi',
},
order: [[ 1, 'asc' ]],
​
        "lengthMenu": [[5, 15, 50, -1], [5, 15, 50, "All"]],
        buttons: [
          {
          extend:  'print',
          exportOptions:
            {
              stripHtml: false,
              columns: ':visible',
            },
​
          },
          'excel',
        ],
​
    });
  var myCheckBox = document.querySelector('input[name="yay"]');
  myCheckBox.addEventListener('change', () => { if (myCheckBox.checked) {data=0;
                                                                        alert('Yhuuuu');}else{data=1;
                                                                        alert('Yhuuuu2');} });
});
​
​
​
2 warnings
Line 31: Use '===' to compare with ''.
Line 60: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers