Reload Datatable with parameter to ajax call - asp.net-mvc

Question

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.
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.
<div class="table table-striped table-bordered">
View Parent
<input id="parentID" name="ParentID" value="" type="hidden">
<table id="myDatatable">
<thead>
<tr>
<th>NodeID</th>
<th>Name</th>
<th>Desc</th>
<th>Active</th>
</tr>
</thead>
</table>
</div>
<script src="~/lib/DataTables-1.10.16/js/jquery.dataTables.js"></script>
<script src="~/lib/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script>
$(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 '<input id="NodeID" value="'+pID+'" disabled/>';
}
},
{ "data": "Name", "width": "100%" },
{ "data": "Desc", "width": "100%" },
{
"data": "IsActive", "width": "50px",
'searchable': false,
"render": function (pActive) {
var status = pActive ? 'checked="checked"' : "";
return '<input class="CheckBox" disabled type="checkbox" ' + status + '" />';
}
}
]
});
$('#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();
});
});
</script>
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
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 => m.NodeID == pParentID).ToList() },
new JsonSerializerSettings());;
}
Am i going about this the wrong way?

Answer 1

Create a function that relodes your data according to your selection. Inside double click event handler, call that function
function LoadDataTable() {
$.ajax({
type: "POST",
url: "/Node/GetNodes",
data: { pParentID: $('#parentID').val() },
success: function(result){
oTable.clear().draw();
oTable.rows.add(result).draw();
}
});
}
$('#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());
LoadDataTable();
}
});