Cannot filter rows based on selected value from dropdown in ASP.NET MVC project

saurav1234

I want to be able to select a value from my dropdown and filter my table accordingly. Currently, with this code.. when I make a selection in the dropdown, the table refreshes and all the rows are there. Essentially, there is no filtering. Can anyone please point me in the right direction? thanks in advance.

This is a ASP.NET MVC project, I am populating a dropdown with values that correlate to a column and when an option is selection, I'm calling jquery to filter to the table based on that value but thats the part thats not working.

           @using (Html.BeginForm("GetData", "Home", FormMethod.Post, new { id = "filterForm"}))
            {
                <div class="col-md-4" style="text-align: center;">
                    @Html.Label("Asset Path", new { @class = "" })           <br />
                    @Html.DropDownList("AssetPath", new SelectList(ViewBag.AssetPaths, ""), new { @class = "btn btn-default", id = "assetPathDropDown" })
                </div>

}

JS/JQuery below---

$(document).ready(function () {
$('#TableId').DataTable(
{
"columnDefs": [
{ "width": "5%", "targets": [0] },
{ "className": "text-center custom-middle-align", "targets": [0, 1, 2, 3, 4, 5] },
],
"language":
{
"processing": "

Processing...

"
},
"processing": true,
"serverSide": true,
"ajax":
{
"url": "/Home/GetData",
"type": "POST",
"dataType": "JSON"
},
"columns": [
{ "data": "AssetPath" },
{ "data": "AssetName" },
{ "data": "Severity" },
{ "data": "Cost" },
{ "data": "Time" },
{ "data": "Active" },
{
data: null,
className: "text-center center",
defaultContent: '<a href="#"><i class="fa fa-send"></i></a> <i class="fa fa-area-chart"></i> <i class="fa fa-remove" style="color:red;"></i>'
}
]
});
var table = $('#TableId').DataTable();
$('#assetPathDropDown').on('change', function () {
table.columns(0).search(this.value).draw();
});