DataTable Options test

by Faisal Khan Janjua

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>

<input type="text" id="dtSearch" /><button class="searchData">Search</button><button class="resetSearch">Reset</button>
<div class="select-filter"></div>
<hr>
<div class="rangeInputs">
  Age: <input type="number" id="minAge" /> - <input type="number" id="maxAge" />
  <hr>
  Salary Range: <input type="number" id="minSalr" /> - <input type="number" id="maxSalr" />
</div>
<hr>
<table id="example" class="display" style="width:100%" data-column-defs='[{"sortable": false, "targets": [1,4]}]'>
  <thead>
    <tr>
      <th>Sr</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
      <th class="filterable">Position</th>
      <th class="filterable">Office</th>
      <th>Salary Static</th>
      <th>Salary Range</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Sr</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
      <th>Position</th>
      <th>Office</th>
      <th>Salary Static</th>
      <th>Salary Range</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>61</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>$320,800</td>
      <td>320800</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Garrett</td>
      <td>Winters</td>
      <td>63</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>$170,750</td>
      <td>170750</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ashton</td>
      <td>Cox</td>
      <td>66</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>$86,000</td>
      <td>86000</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>22</td>
      <td>Senior Javascript...

CSS

.clear{
  clear: both;
}
.select-filter {
  float: right;
}
.select-filter select {
    width: 100px;
    height: 21px;
}
.rangeInputs input {
  width: 137px;
}

JavaScript

var rowsLength = 10;
var table = $('#example').DataTable( {
  // dom: 'Blrfti<"clear">p', // default positioning of elements also Show/Hide elements
  dom: 'frtipB',
  // dom: 'lrti<"clear">p', // hide search
  //dom: '<lf<t>ip>',
  //dom: '<"top"i>rt<"bottom"flp><"clear">',
  //dom: '<l<t>ip>', // hide only search
  responsive: true,
  bLengthChange: true, // records/page
  pageLength: rowsLength,
  searching: true, // searching option, must b true for searching operations
  buttons: [
    'csvHtml5'
  ],
  paging: true, // Show/Hide pagination 
  info: true, // page Info "Showing 10 of N entries"
  
  // aaSorting: [], // disable sorting first column on start
  // order: [], // disable sorting first column on start
  // order: [[ 2, 'asc' ], [ 3, 'asc' ]],

  lengthMenu: [[rowsLength, 20, 40, -1], [rowsLength, 20, 40, 'All']],
  search: { // setting for multi-values Search "Officer|Regional|Chief"
    "regex": true,
    "smart": false,
  },
  language: {
    "info": "Showing _START_ to _END_ of _TOTAL_ / _MAX_ entries - Current page is _PAGE_ and Total pages are _PAGES_",
    "lengthMenu":     "Show only _MENU_ entries/page",
    "search":         "My Custom Search",
    "paginate": {
      //"first":      "First",
      //"last":       "Last",
      "next":       "<span style='color:red;'> &#10095; </span>",
      "previous":   "<span style='color:red;'> &#10094; </span>",
    },
    "aria": {
      "sortAscending":  ": activate to sort column ascending",
      "sortDescending": ": activate to sort column descending"
    },

    //"decimal":        ",", // desimal Symbol
    //"emptyTable":     "No data available in table",
    //"infoEmpty":      "Showing 0 to 0 of 0 entries",
    //"infoFiltered":   "(filtered from _MAX_ total entries)",
    //"infoPostFix":    "",
    //"thousands":      ",",
    //"loadingRecords": "Loading...",
    //"processing":     "Processing...",
    //"zeroRecords":    "No matching records found",
 ...