---
description: https://codepen.io/RedJokingInn/pen/vYJKKEJ
---

# \[DATATABLE] DataTables - Column Search (ok)

<figure><img src="https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FP8EIjtKUWMB8w77BGlje%2Fimage.png?alt=media&#x26;token=4667ced1-48eb-477e-a4be-9dac29cc3b83" alt=""><figcaption></figcaption></figure>

C:\xampp\htdocs\wpclidemo\index.php

```php
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
  <title>Simple DataTable</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
  <style>
    body {
      margin: 2em;
    }
    thead input {
      width: 100%;
      padding: 3px;
      box-sizing: border-box;
    }
  </style>
</head>
<body translate="no">
  <a class="btn btn-success" style="float:left;margin-right:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
  <div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
    <table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" aria-describedby="example_info" role="grid" style="width: 100%;">
      <thead>
        <tr role="row">
          <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Order: activate to sort column descending" style="width: 147px;" aria-sort="ascending">Order</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 181px;">Description</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Deadline: activate to sort column ascending" style="width: 165px;">Deadline</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 152px;">Status</th>
          <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Amount: activate to sort column ascending" style="width: 160px;">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr role="row" class="odd">
          <td class="sorting_1">1</td>
          <td>Alphabet puzzle</td>
          <td>2016/01/15</td>
          <td>Done</td>
          <td data-order="1000">€1.000,00</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">2</td>
          <td>Layout for poster</td>
          <td>2016/01/31</td>
          <td>Planned</td>
          <td data-order="1834">€1.834,00</td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">3</td>
          <td>Image creation</td>
          <td>2016/01/23</td>
          <td>To Do</td>
          <td data-order="1500">€1.500,00</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">4</td>
          <td>Create font</td>
          <td>2016/02/26</td>
          <td>Done</td>
          <td data-order="1200">€1.200,00</td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">5</td>
          <td>Sticker production</td>
          <td>2016/02/18</td>
          <td>Planned</td>
          <td data-order="2100">€2.100,00</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">6</td>
          <td>Glossy poster</td>
          <td>2016/03/17</td>
          <td>To Do</td>
          <td data-order="899">€899,00</td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">7</td>
          <td>Beer label</td>
          <td>2016/05/28</td>
          <td>Confirmed</td>
          <td data-order="2499">€2.499,00</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">8</td>
          <td>Shop sign</td>
          <td>2016/04/19</td>
          <td>Offer</td>
          <td data-order="1099">€1.099,00</td>
        </tr>
        <tr role="row" class="odd">
          <td class="sorting_1">9</td>
          <td>X-Mas decoration</td>
          <td>2016/10/31</td>
          <td>Confirmed</td>
          <td data-order="1750">€1.750,00</td>
        </tr>
        <tr role="row" class="even">
          <td class="sorting_1">10</td>
          <td>Halloween invite</td>
          <td>2016/09/12</td>
          <td>Planned</td>
          <td data-order="400">€400,00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Order</th>
          <th>Description</th>
          <th>Deadline</th>
          <th>Status</th>
          <th>Amount</th>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
  <script>
    $(document).ready(function() {
      //Only needed for the filename of export files.
      //Normally set in the title tag of your page.
      document.title = "Simple DataTable";
      // Create search inputs in footer
      $("#example tfoot th").each(function() {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
      });
      // DataTable initialisation
      var table = $("#example").DataTable({
        dom: '<"dt-buttons"Bf><"clear">lirtp',
        paging: true,
        autoWidth: true,
        buttons: [
          "colvis",
          "copyHtml5",
          "csvHtml5",
          "excelHtml5",
          "pdfHtml5",
          "print"
        ],
        initComplete: function(settings, json) {
          var footer = $("#example tfoot tr");
          $("#example thead").append(footer);
        }
      });
      // Apply the search
      $("#example thead").on("keyup", "input", function() {
        table.column($(this).parent().index()).
        search(this.value).
        draw();
      });
    });
    //# sourceURL=pen.js
  </script>
</body>
</html>

```
