I need to make an ajax call out side of the data table. I have an input which is not inside my data table. Basically i need to listen that input and on onkeyup event I want to make ajax request for my data table and feed my table with data returned ajax request.
Here is my table:
var table = $('#bootstrap-data-table-export').DataTable({
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
columnDefs: [{
targets: -1,
data: null,
defaultContent: " <button class='btn btn-sm table-button-dark' > <i class='fa fa-archive fa-xs' ></i></button> <button class='btn table-button-dark btn-sm' > <i class='fa fa-eye fa-xs' ></i></button> <button class='btn table-button-dark btn-sm' > <i class='fas fa-download fa-xs' /></button>"
}],
language: {
lengthMenu: "Sayfa Başına _MENU_ Kayıt",
zeroRecords: "Böyle Bir Kayıt Yok",
info: "_PAGE_ Sayfanın _PAGES_ . Sayfasındasınız",
infoEmpty: "No records available",
infoFiltered: "(Toplam _MAX_ Filtrelendi)",
search: "Ara",
paginate: {
previous: "Önceki",
next:"Sonraki"
}
}
});
Here is my ajax request:
function getDT(data) {
$.ajax({
method: 'POST',
data: data,
url: '/api/ajax/SeriesList',
}).done(function (result) {
console.log(typeof result);
result = JSON.parse(result);
$('#bootstrap-data-table-export').DataTable().clear();
$('#bootstrap-data-table-export').DataTable().rows.add(result.data).draw();
});
}
I can change everything in this code it doesnt matter. I really need an answer.
Okey I solved that issue. As @Bulent said I created a function
function CustomInitTable() {
var table = $('#bootstrap-data-table-export').DataTable({
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
columnDefs: [{
targets: -1,
data: null,
defaultContent: " <button class='btn btn-sm table-button-dark' > <i class='fa fa-archive fa-xs' ></i></button> <button class='btn table-button-dark btn-sm' > <i class='fa fa-eye fa-xs' ></i></button> <button class='btn table-button-dark btn-sm' > <i class='fas fa-download fa-xs' /></button>"
}],
ajax: {
method: "POST",
url: "/api/ajax/IssuedInvoiceController",
data: RequestObject
},
"bDestroy": true,
language: {
lengthMenu: "Sayfa Başına _MENU_ Kayıt",
zeroRecords: "Böyle Bir Kayıt Yok",
info: "_PAGE_ Sayfanın _PAGES_ . Sayfasındasınız",
infoEmpty: "No records available",
infoFiltered: "(Toplam _MAX_ Filtrelendi)",
search: "Ara",
paginate: {
previous: "Önceki",
next: "Sonraki"
}
}
});
}
And then I called my CustomInitTable function from my searchRequester function.
function searchRequester(id) {
RequestObject[id] = $(`#${id}`).val()
CustomInitTable()
}
That search requester function is bind to my html inputs onkeyup event. I know it's probably not the best solution for this issue. If I find something better than that I'll update here.
IMPORTANT! You have to add "bDestroy":true to your data table otherwise you initialise data table twice and that's not allowed.