我正在使用数据表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();
});