Hi Im trying to implement the server side search using the select input with datatable but it doesn't seem to pass the selected input value to the server side.
basically it populates the input list in the footer and fires this on change event but doesn't pass the selected value to the server side...
am i missing something ? some help would be very appreciated.
var table = $('#tbl_product_list');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"processing": true,
"serverSide": true,
"ajax":
{
"url": "/Product/GetProductData",
"type": "POST",
"dataType": "JSON"
},
"columns": [
{
"data": "ProductName"
},
{
"data": "ProductCategory"
},
{
"data": "ProductType"
},
{
"data": "ProductSize"
},
{
"data": "CurrentQuantity"
},
{ "data": null, "defaultContent": "<button class='btn btn-s yellow-gold ajax-edit' data-toggle='modal' type='button'> 수정 </button>" }
],
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"lengthMenu": [
[10, 20, 30, 40,50],
[10, 20, 30, 40,50] // change per page values here
],
// set the initial value
"pageLength": 10,
"pagingType": "bootstrap_full_number",
"order": [
[0, "asc"]
],
"createdRow": function (row, data, dataIndex) {
$(row).find('td:eq(12) button').attr('data-url', '/Product/GetProductEditForm/' + data["ProductID"]);
},
"initComplete": function () {
this.api().columns([1, 2, 3]).every(function () {
var column = this;
var select = $('<select class="form-control input-sm"><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
console.log(val);
this.search(val).draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
}
});
}
