javascript - 无法根据下拉列表中的选定值过滤数据表数据

我希望能够从下拉列表中选择一个值并相应地过滤表。当前，使用此代码..当我在下拉列表中进行选择时，表将刷新，并且所有行都在那里。本质上，没有过滤。谁能指出我正确的方向？提前致谢。

这是一个ASP.NET MVC项目，我在下拉列表中填充了与列相关的值，当选择了选项时，我在调用jquery以基于该值过滤到表，但这就是那部分无效的内容。

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

最佳答案

请注意，您未在ajax下设置data属性，请尝试创建用于绑定jquery数据表并按需调用的函数。请尝试如下操作 [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>'
    }]
  });

}

在Home控制器动作中，您可以编写如下内容

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

关于javascript - 无法根据下拉列表中的选定值过滤数据表数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40939689/