Cannot filter datatable data based on selected value in dropdown

Question

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.

HTML

 @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>
    }

Jquery

$(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();
});

Any console errors? Are you able to give us any sample data? Note there is a missing }); at the end of the JS, presume this is a copy & paste error? — John M
– John M, Commented Dec 4, 2016 at 21:12
@sparta93 Can you give more details on the dropdown values (you can inspect the rendered HTML select tag in browser). — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 6, 2016 at 7:43
I also have same problem, you can check this link (stackoverflow.com/questions/62359062/…) — Daleman
– Daleman, Commented Jun 16, 2020 at 12:34

Lin · Accepted Answer · 2016-12-05 03:47:10Z

Note that you are not setting the data property under ajax, Try to create a function for binding jquery datatable and call on demand.Try as follows [Formattedcode].

$(document).ready(function() {

  loadDataTable();

  $('#assetPathDropDown').on('change', function() {
    loadDataTable();
  });

});

function loadDataTable() {
  //set the input search text
  var dt = {
    assetPath: $('#assetPathDropDown').$('#assetPathDropDown').val()
  };
  $('#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" 
      "data": function(dt) {
        //set the antiforgery token since its ajax post
        //data.__RequestVerificationToken $('[name=__RequestVerificationToken]').val();
        return dt;
      };
    },
    "columns": [{
      "data": "AssetPath"
    }, {
      "data": "AssetName"
    }, {
      "data": "Severity"
    }, {
      "data": "Cost"
    }, {
      "data": "Time"
    }, {
      "data": "Active"
    }, {
      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>'
    }]
  });

}

In the Home controller action you can write as follows

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult GetData([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel)
{

    //filter data and return action result  todo: get responseJson data
     return Json(responseJson, JsonRequestBehavior.AllowGet);
}

Collectives™ on Stack Overflow

Cannot filter datatable data based on selected value in dropdown

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related