File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link href="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-Frt5PrADCqKhT2HpfV7eDRqG0sBy2CHCPwj8aJ8EZ7MDAN5ojmhN/6/45K4eY4Ih" crossorigin="anonymous">
​
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/v/bs4-4.6.0/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-wvlHRKzYT5ZpyNrRQmrJ6HPAV3QXk++W05RIs6bsQaLk1d0X+ZGIPsOOc33oqgUE" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
​
    <meta charset=utf-8 />
    <title>Test</title>
  </head>
  <body>
​
    <body>
​
      <h3 class="text-center">DataTables 2.2.2 - SearchBuilder and SearchPanes options</h3>
      <br>
​
      <div class="container">
        <div class="card">
          <div class="card-header bg-light text-dark">
            <h4 class="text-center">Test with Card component</h4>
          </div>
          <div class="card-body">
            <table id="dttable1" class="table table-hover" cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th data-name="id">id</th>
                  <th data-name="name">Name</th>
                  <th data-name="email">E-mail</th>
                  <th data-name="action" class="unsearchable">Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>Name 1</td>
                  <td><a href="mailto:#">email1@domain.com</a></td>
                  <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Name 2</td>
                  <td><a href="mailto:#">email2@domain.com</a></td>
                  <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
​
      <br><hr><br>
      <div class="container-fluid">
        <h4 class="text-center">Test with fluid container</h4>
        <table id="dttable2" class="table table-hover" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th data-name="id">id</th>
              <th data-name="name">Name</th>
              <th data-name="email">E-mail</th>
              <th data-name="action" class="unsearchable">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Name 1</td>
              <td><a href="mailto:#">email1@domain.com</a></td>
              <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Name 2</td>
              <td><a href="mailto:#">email2@domain.com</a></td>
              <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
            </tr>
          </tbody>
        </table>
      </div>
​
      <br><hr><br>
      <div class="container">
        <h4 class="text-center">Test with container only</h4>
        <table id="dttable3" class="table table-hover" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th data-name="id">id</th>
              <th data-name="name">Name</th>
              <th data-name="email">E-mail</th>
              <th data-name="action" class="unsearchable">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Name 1</td>
              <td><a href="mailto:#">email1@domain.com</a></td>
              <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
            </tr>
            <tr>
              <td>2</td>
              <td>Name 2</td>
              <td><a href="mailto:#">email2@domain.com</a></td>
              <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
            </tr>
          </tbody>
        </table>
      </div>
​
  </body>
</html>
​
CSSSaved
 
body {
  font: 90%/1.45em Arial, sans-serif;
  margin: 20px;
  padding: 0px;
  color: #333;
  background-color: #fff;
  border: 1px red solid
}
​
JavaScriptSaved
 
$(document).ready(function() {
  
  var dataTableParam = {
    "processing": true,
    "autoWidth": true,
    "layout": {
        "top2Start": {
            "buttons": [{
                    "extend": "searchBuilder",
                    "config": {
                        "greyscale": true,
                        //"columns": [1, 2, 3]
                      "columns": ':not(.unsearchable)'
                    }
                }
            ]
        },
        "top2End": {
            "buttons": [{
                    "extend": "searchPanes",
                    "config": {
                        "greyscale": true
                    }
                }
            ]
        }
    },
    "columnDefs": [
        {
            searchPanes: {
                show: true
            },
            targets: 1
        },
        {
            "orderable": false, "targets": [-1]
        },
        {
            "searchable": false, "targets": [-1]
        }
    ]
  };
​
  $("#dttable1").DataTable(dataTableParam);
  $("#dttable2").DataTable(dataTableParam);
  $("#dttable3").DataTable(dataTableParam);
​
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers