Necesito hacer una llamada ajax al lado de la tabla de datos. Tengo una entrada que no está dentro de mi tabla de datos. Básicamente, necesito escuchar esa entrada y en el evento onkeyup quiero hacer una solicitud ajax para mi tabla de datos y alimentar mi tabla con la solicitud ajax devuelta de datos.
Aquí está mi tabla:
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" } } });Aquí está mi solicitud de ajax:
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(); }); }Puedo cambiar todo en este código, no importa. De verdad necesito una respuesta.
Okey, resolví ese problema. Como dijo @Bulent, creé una función
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" } } }); }Y luego llamé a mi función CustomInitTable desde mi función searchRequester.
function searchRequester(id) { RequestObject[id] = $(`#${id}`).val() CustomInitTable() }Esa función de solicitante de búsqueda está vinculada a mi evento onkeyup de entradas html. Sé que probablemente no sea la mejor solución para este problema. Si encuentro algo mejor que eso, lo actualizaré aquí.
¡IMPORTANTE! Debe agregar "bDestroy": true a su tabla de datos; de lo contrario, inicializará la tabla de datos dos veces y eso no está permitido.