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

Question

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

这是一个 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();
});

Answer 1

注意，你没有在ajax下设置data属性，尝试创建一个绑定(bind)jquery datatable的函数并按需调用。尝试如下 [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 Controller 操作中你可以编写如下

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