title: Datatables.Net redraw table with updated ajax query
body: <p>I currently have a datatable with a large datasource ~1.2 million rows. </p>
  
  <p>Trying to do some custom filtering through the ajax filter with server side loading.
  Current error is table cannot be reinitalized which I understand why.</p>
  
  <p>Is there a way to update the ajax filter so that is has the updated values from the input fields which then updates the payload with those filters.</p>
  
  <pre><code>function drawCDRTable() {
      var endpoints = $("#endpoints").val();
      var dateselection = $("#dateSelection").val();
      var dates = $("#dates").val();
      var startdate = $("#startdate").val();
      var enddate = $("#enddate").val();
  
      $("#call-records").DataTable({
          // Design Assets
          scrollX: "100%",
          dom: "lBfrtip",
          lengthMenu: [
              [10, 25, 50, 100, -1],
              ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
          ],
          stateSave: true,
          autoWidth: true,
          // ServerSide Setups
          processing: true,
          serverSide: true,
          // Paging Setups
          paging: true,
          // Searching Setups
          //searching: { regex: true },
  
          language:
          {
              processing: "&lt;img height='60px' width='107px' src='images/loading-a.gif' /&gt;",
          },
          // Ajax Filter
          ajax: {
              url: "/CDR/LoadData",
              type: "POST",
              dataType: "json",
              data: { endpoints: endpoints, dateselection: dateselection, dates: dates, startdate: startdate, enddate: enddate }
          },
          // Columns Setups
          columns: [
  
              {
                  data: "date_Time", render: function (data, type, row) {
                      // If display or filter data is requested, format the date
                      if (type === "display" || type === "filter") {
                          return moment(data).format("DD/MM/YYYY HH:mm:ss");
                      }
                      // Otherwise the data type requested (`type`) is type detection or
                      // sorting data, for which we want to use the raw date value, so just return
                      // that, unaltered
                      return data;
                  }
              },
              { data: "call_Direction" },
              { data: "calling_Party" },
              { data: "calling_Digits" },
              { data: "called_Party" },
              { data: "called_Digits" },
              {
                  data: "duration", render: function (data, type, row) {
                      // If display or filter data is requested, format the date
                      if (type === "display" || type === "filter") {
                          return moment(data).format("HH:mm:ss");
                      }
                      // Otherwise the data type requested (`type`) is type detection or
                      // sorting data, for which we want to use the raw date value, so just return
                      // that, unaltered
                      return data;
                  }
              },
              {
                  data: "cost", render: function (data, type, row) {
                      // If display or filter data is requested, format the date
                      if (type === "display" || type === "filter") {
                          return data.toFixed(2);
                      }
                      // Otherwise the data type requested (`type`) is type detection or
                      // sorting data, for which we want to use the raw date value, so just return
                      // that, unaltered
                      return data;
                  }
              },
              { data: "reason" },
              { data: "outcome" },
              {
                  data: "second_Ring_Time", render: function (data, type, row) {
                      // If display or filter data is requested, format the date
                      if (type === "display" || type === "filter") {
                          return moment(data).format("HH:mm:ss");
                      }
                      // Otherwise the data type requested (`type`) is type detection or
                      // sorting data, for which we want to use the raw date value, so just return
                      // that, unaltered
                      return data;
                  }
              },
              { data: "category" }
          ],
          // Column Definitions
          columnDefs: [
              { targets: "no-sort", orderable: false },
              { targets: "no-search", searchable: false },
              {
                  targets: "trim",
                  render: function (data, type, full, meta) {
                      if (type === "display") {
                          data = strtrunc(data, 10);
                      }
  
                      return data;
                  }
              },
              { targets: "date-type", type: "date-eu" }
          ],
          buttons: [
              {
                  extend: "pdfHtml5",
                  title: "Call Detail Records",
                  orientation: "landscape",
                  pageSize: "LEGAL",
                  text: "&lt;i class='fa fa-file-pdf-o'&gt; PDF&lt;/i&gt;",
                  titleAttr: "PDF"
              },
              {
                  extend: "excelHtml5",
                  title: "Call Detail Records",
                  text: "&lt;i class='fa fa-file-excel-o'&gt; Excel&lt;/i&gt;",
                  titleAttr: "Excel"
              }
          ]
      });
  
      $('.buttons-pdf').addClass('btn btn-outline-primary');
      $('.buttons-excel').addClass('btn btn-outline-primary');
  
  }
  
  drawCDRTable();
  
  $('#btnFilter').click(function () {
      drawCDRTable();
  });  
  </code></pre>
  
  <p>});</p>