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>
      <table id="dttable" 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">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>
          <tr>
            <td>3</td>
            <td>Name 3</td>
            <td><a href="mailto:#">email3@domain.com</a></td>
            <td><button type="button" class="btn btn-secondary btn-sm">Todo</button></td>
          </tr>
        </tbody>
      </table>
    
  </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]
                    }
                }
            ]
        },
        "top2End": {
            "buttons": [{
                    "extend": "searchPanes",
                    "config": {
                        "greyscale": true
                    }
                }
            ]
        }
    },
    "columnDefs": [
        {
            "orderable": false, "targets": [-1]
        },
        {
            "searchable": false, "targets": [-1]
        }
    ]
  };
​
  var oTable = $("#dttable").DataTable(dataTableParam);
​
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers