title: Reload Datatable with parameter to ajax call
body: <p>Good day all, I have a project that lists rows of a specific 'node'. Each node has the ability to have a parent of that node.  Think simple Hierarchy pattern.</p>
  
  <p>Well. What I want to happen is, on single click of the row, i want it to be highlighted, but on double click of a row, i want the table to refresh but with the new data.  The data will be based off of who has a parent of this id.  </p>
  
  <pre><code>&lt;div class="table table-striped table-bordered"&gt;
      &lt;a href="" id="parentIDLink"&gt;View Parent&lt;/a&gt;
      &lt;input id="parentID" name="ParentID" value="" type="hidden"&gt;
      &lt;table id="myDatatable"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;NodeID&lt;/th&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                  &lt;th&gt;Desc&lt;/th&gt;
                  &lt;th&gt;Active&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script src="~/lib/DataTables-1.10.16/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="~/lib/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
      $(document).ready(function () {
          var oTable = $('#myDatatable').DataTable({
              "ajax": {
                  "url": '/Node/GetNodes?pParentID=' + $('#parentID').val(),
                  "type": "get",
                  "datatype": "json"
              },
              "autoWidth": true,
              "columns": [
                  {
                      "data": "NodeID",
                      "render": function (pID) {
                          return '&lt;input id="NodeID" value="'+pID+'" disabled/&gt;';
                      }
                  },
                  { "data": "Name", "width": "100%" },
                  { "data": "Desc", "width": "100%" },
                  {
                      "data": "IsActive", "width": "50px",
                      'searchable': false,
                      "render": function (pActive) {
                          var status = pActive ? 'checked="checked"' : "";
                          return '&lt;input class="CheckBox" disabled type="checkbox" ' + status + '" /&gt;';
                      }
                  }               
              ]
          });
  
          $('#myDatatable tbody').on('click', 'tr', function () {
              if ($(this).hasClass('selected')) {
                  $(this).removeClass('selected');
              }
              else {
                  oTable.$('tr.selected').removeClass('selected');
                  $(this).addClass('selected');
  
                  $('#parentID').val($('td #NodeID', this).val());
              }
          });
  
          $('#myDatatable tbody').on('dblclick', 'tr', function() {
              if ($(this).hasClass('selected')) {
                  $(this).removeClass('selected');
              }
              else {
                  oTable.$('tr.selected').removeClass('selected');
                  $('#parentID').val($('td #NodeID', this).val());
  
                  oTable.ajax.reload(); // DOESN"T DO WHAT I EXPECT
              }
          });
  
          $("#parentIDLink").click(function () {
              oTable.ajax.reload();
          });
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Above is the html for that page.   Below is the MVC code that gets called to draw the list. Essentially grab all node if the id is null but grab nodes that have a specific parent if the value is not null</p>
  
  <pre><code>public ActionResult GetNodes(string pParentID)
          {
              if (pParentID == null || pParentID == "null" || pParentID == string.Empty)
                  return base.Json(new { data = m_Context.Nodes.ToList() }, 
                      new JsonSerializerSettings());
              else
                  return base.Json(new { data = m_Context.Nodes.Where(m =&gt; m.NodeID == pParentID).ToList() }, 
                      new JsonSerializerSettings());;
  
          }
  </code></pre>
  
  <p>Am i going about this the wrong way?</p>