DataTable: Reload AJAX data

by Suzy

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<form method="post" action="">
  <div id="demo">
    <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Extn.</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </div>
</form>

CSS

.column-filter-widget {
  float: left;
  padding: 5px;
}

.column-filter-widget select {
  display: block;
}

.column-filter-widgets a.filter-term {
  display: block;
  text-decoration: none;
  padding-left: 10px;
  font-size: 90%;
}

.column-filter-widgets a.filter-term:hover {
  text-decoration: line-through !important;
}

.column-filter-widget-selected-terms {
  clear: left;
}

JavaScript

/*
 * File:        ColumnFilterWidgets.js
 * Version:     1.0.4
 * Description: Controls for filtering based on unique column values in DataTables
 * Author:      Dylan Kuhn (www.cyberhobo.net)
 * Language:    Javascript
 * License:     GPL v2 or BSD 3 point style
 * Contact:     cyberhobo@cyberhobo.net
 * 
 * Copyright 2011 Dylan Kuhn (except fnGetColumnData by Benedikt Forchhammer), all rights reserved.
 *
 * This source file is free software, under either the GPL v2 license or a
 * BSD style license, available at:
 *   http://datatables.net/license_gpl2
 *   http://datatables.net/license_bsd
 *
 * Quickly hacked to use new DataTables 1.10 API for extracting unique keys from columns by abs@absd.org
 */


(function($) {

  // reset
  $.fn.dataTableExt.oApi.fnFilterClear = function(oSettings) {

    var i, iLen;

    /* Remove global filter */
    oSettings.oPreviousSearch.sSearch = "";

    /* Remove the text of the global filter in the input boxes */
    if (typeof oSettings.aanFeatures.f != 'undefined') {
      var n = oSettings.aanFeatures.f;
      for (i = 0, iLen = n.length; i < iLen; i++) {
        $('input', n[i]).val('');
      }
    }

    /* Remove the search text for the column filters - NOTE - if you have input boxes for these
     * filters, these will need to be reset
     */
    for (i = 0, iLen = oSettings.aoPreSearchCols.length; i < iLen; i++) {
      oSettings.aoPreSearchCols[i].sSearch = "";
    }

    /* Redraw */
    oSettings.oApi._fnReDraw(oSettings);
  };


  if ($.fn.dataTable.fnVersionCheck('1.10.0')) {
    $.fn.dataTableExt.oApi.fnGetColumnData = function(oSettings, iColumn) {
      return oSettings.oInstance.api().column(iColumn, {
        search: 'applied'
      }).data().sort().unique();
    }
  } else {

    /*
     * Function: fnGetColumnData
     * Purpose:  Return an array of table values from a particular column.
     * Returns:  array string: 1d data array 
     * Inputs:   object:oSettings - dataTable settings object. This is...