title: Adding custom search fields to a DataTable object
body: <p>I need to add fields that I created on a page to a DataTable object. Even though they aren't typical parameters (order, search, pagination, etc.), they can get save and loaded along with the rest of the DataTables' object state.</p>
  <p><strong>JavaScript</strong></p>
  <pre><code>$(document).ready(function () {
      var table = $('#stackoverflow-datatable').DataTable({
          &quot;processing&quot;: true,
          &quot;stateSave&quot;: true,
          &quot;stateSaveCallback&quot;: function (settings, data) {
              $.ajax({
                  &quot;url&quot;: &quot;/api/save_state&quot;,
                  &quot;data&quot;: data,
                  &quot;dataType&quot;: &quot;json&quot;,
                  &quot;success&quot;: function (response) {}
              });
          },
          &quot;stateLoadCallback&quot;: function (settings) {
              var o;
              $.ajax({
                  &quot;url&quot;: &quot;/api/load_state&quot;,
                  &quot;async&quot;: false,
                  &quot;dataType&quot;: &quot;json&quot;,
                  &quot;success&quot;: function (json) {
                      o = json;
                  }
              });
  
              return o;
          }
      });
  });
  </code></pre>
  <p>And then, the JavaScript that I thought would add the fields to the object is the following.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      $.fn.dataTableExt.afnFiltering.push(
          function (settings, data) {
              var dateStart = parseDateValue($(&quot;#dateStart&quot;).val());
              var dateEnd = parseDateValue($(&quot;#dateEnd&quot;).val());
              var evalDate = parseDateValue(data[9]);
  
              return evalDate &gt;= dateStart &amp;&amp; evalDate &lt;= dateEnd;
          }
      );
  
      function getDate(element) {
          return $.datepicker.parseDate('mm/dd/yy', element.value);
      }
  
      // Convert mm/dd/yyyy into numeric (ex. 08/12/2010 -&gt; 20100812)
      function parseDateValue(rawDate) {
          var dateArray = rawDate.split(&quot;/&quot;);
  
          return dateArray[2] + dateArray[0] + dateArray[1];
      }
  &lt;/script&gt;
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;input type=&quot;text&quot; id=&quot;dateStart&quot; class=&quot;datepicker&quot; name=&quot;dateStart&quot;&gt;
  &lt;input type=&quot;text&quot; id=&quot;dateEnd&quot; class=&quot;datepicker&quot; name=&quot;dateEnd&quot;&gt;
  
  &lt;table id=&quot;stackoverflow-datatable&quot;&gt;
      &lt;thead&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Date&lt;/th&gt;
      &lt;/thead&gt;
  </code></pre>