CODEWITHSUNDEEP
javascriptjqueryasp.netdatatables
sparta93
sparta93

Reputation: 3854

Cannot filter datatable data based on selected value in dropdown

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

Upvotes: 0

Views: 2373

Answers (1)

Lin
Lin

Reputation: 663

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

Upvotes: 1

Related Questions