如何从数据表的输入端发出带有 keyup 事件的 ajax 请求？答案

【问题标题】：How to make an ajax request with keyup event from input out side the data table?如何从数据表的输入端发出带有 keyup 事件的 ajax 请求？
【发布时间】：2021-11-17 12:44:48
【问题描述】：

我需要在数据表的一侧进行 ajax 调用。我有一个不在我的数据表中的输入。基本上我需要听那个输入并且在 onkeyup 事件上我想为我的数据表发出 ajax 请求，并用返回的 ajax 请求数据提供给我的表。

这是我的桌子：

 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"
                    }

                }
            });

这是我的 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();
            });
        }

我可以更改此代码中的所有内容，这并不重要。我真的需要一个答案。

【问题讨论】：

创建一个函数来创建一个表。使用类似var table = generateTable(data, and, other, arguments) 的函数调用相同的函数以使用从 Ajax 收到的新数据重新生成表。
谢谢。我就是这么想的。如果可以的话，我现在正在尝试实现该逻辑，我将分享:)

标签： javascript ajax datatable

【解决方案1】：

好的，我解决了这个问题。正如@Bulent 所说，我创建了一个函数

  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"
                    }

                }
            });


        }

然后我从我的 searchRequester 函数中调用了我的 CustomInitTable 函数。

function searchRequester(id) {

            RequestObject[id] = $(`#${id}`).val()
           
            CustomInitTable()
        }

该搜索请求函数绑定到我的 html 输入 onkeyup 事件。我知道这可能不是这个问题的最佳解决方案。如果我发现比这更好的东西，我会在这里更新。

重要！您必须将 "bDestroy":true 添加到数据表中，否则您将数据表初始化两次，这是不允许的。

【讨论】：