Datatables + YADCF + Select2 - prefilled data

by Michael Baas

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table id="sample">
  <thead>
    <tr>
      <th>Country</th>
      <th>% GDP</th>
      <th>Population (thousands)</th>
      <th>GDP ($Millions)</th>
      <th>$/Capita</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>United States</td>
      <td>17.9</td>
      <td>318892.1</td>
      <td>16720000</td>
      <td>9385.24</td>
    </tr>
    <tr>
      <td>Monaco</td>
      <td>4.3</td>
      <td>30.51</td>
      <td>6213</td>
      <td>8757.01</td>
    </tr>
    <tr>
      <td>Luxembourg</td>
      <td>7.7</td>
      <td>520.67</td>
      <td>42670</td>
      <td>6310.29</td>
    </tr>
    <tr>
      <td>Switzerland</td>
      <td>10.9</td>
      <td>8061.52</td>
      <td>371200</td>
      <td>5019.01</td>
    </tr>
    <tr>
      <td>Norway</td>
      <td>9.1</td>
      <td>5147.79</td>
      <td>282200</td>
      <td>4988.59</td>
    </tr>
    <tr>
      <td>Netherlands</td>
      <td>12</td>
      <td>16877.35</td>
      <td>699700</td>
      <td>4974.95</td>
    </tr>
    <tr>
      <td>Canada</td>
      <td>11.2</td>
      <td>34834.84</td>
     ...

JavaScript

$(function() {
  $("#sample").DataTable({
    "columns": [{}, {
      "className": "dt-right"
    }, {
      "className": "dt-right"
    }, {
      "className": "dt-right"
    }, {
      "className": "dt-right"
    }],
    "mark": true
  });
  yadcf.init($("#sample").DataTable(), [{
    "column_number": 1,
    "filter_type": "range_number_slider"
  }, {
    "column_number": 2,
    "filter_type": "range_number_slider"
  }, {
    "column_number": 3,
    "filter_type": "range_number_slider"
  }, {
    "column_number": 4,
    "filter_type": "range_number_slider"
  }]);
});