事件处理程序中的Datatables.draw（）不会重绘表

Question

我正在使用数据表jquery插件。我的初始表是从html表创建的。页面加载后，我根据某个初始值执行.draw()来绘制数据表，效果很好。

当我更改select的值时，我希望重新绘制数据表。 onchange事件已触发，但数据表未重新绘制

var table = $("#table").DataTable({
    processing: true,
    serverSide: false,
    responsive: true,
    paging: false,
    searching: true,
    "sDom": "<\"top\">r<\"bottom\"t<\"row\"<\"col-md-6 col-sm-12\"i><\"col-md-6 col-sm-12 pagination-container\"p>>><\"clear\">",
    "order": [
      [ 0, "asc" ]
    ],
    "drawCallback": function() {
      $("[data-toggle=\"tooltip\"]").tooltip();
    },
    "columnDefs": [ {
        "targets": [ 0 ],
        "orderable": true,
        "searchable": true,
        "data": "is_active"
      },
      {
        "targets": [ 1 ],
        "orderable": true,
        "searchable": true,
        "data": "title"
      },
      {
        "targets": [ 2 ],
        "orderable": true,
        "searchable": true,
        "visible": false,
        "data": "category"
      },
      {
        "targets": [ 3 ],
        "orderable": true,
        "searchable": true,
        "data": "created_at"
      },
      {
        "targets": [ 4 ],
        "orderable": true,
        "searchable": true,
        "data": "edited_at"
      },
      {
        "targets": [ 5 ],
        "orderable": false,
        "searchable": false,
        "data": "editing_options"
      },
      {
        "targets": [ 6 ],
        "orderable": true,
        "searchable": true,
        "visible": false,
        "data": "id"
      }
    ],
    "columns": [ {
        "name": "is_active",
        "data": {
          "_": "is_active",
          "filter": "is_active",
          "display": "is_active"
        }
      },
      {
        "name": "title",
        "data": {
          "_": "title",
          "filter": "title",
          "display": "title"
        }
      },
      {
        "name": "category",
        "data": {
          "_": "category",
          "filter": "category",
          "display": "category"
        }
      },
      {
        "name": "created_at",
        "data": {
          "_": "created_at",
          "filter": "created_at",
          "display": "created_at"
        }
      },
      {
        "name": "edited_at",
        "data": {
          "_": "edited_at",
          "filter": "edited_at",
          "display": "edited_at"
        }
      },
      {
        "name": "editing_options",
        "data": {
          "_": "editing_options",
          "filter": "editing_options",
          "display": "editing_options"
        }
      },
      {
        "name": "id",
        "data": {
          "_": "id",
          "filter": "id",
          "display": "id"
        }
      }
    ],
    "initComplete": function() {}
  });

  // this does successfully draw the initial table
    table.column(2).search($("select#emailCategory").val()).draw();

  // this event does register, the console.log() get fired. However, datatable does not re-draw
    $(document).off("change", "#emailCategory").on("change", "#emailCategory", function() {
    console.log('event registered')
    table.column(2).search($(this).val()).order([ 4, "asc" ]).draw();
  });