时间戳

首页 > 解决方案 > 如何从数据表的输入端发出带有 keyup 事件的 ajax 请求？

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

问题描述

我需要在数据表的一侧进行 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();
            });
        }

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

标签： javascriptajaxdatatable

解决方案

好的，我解决了这个问题。正如@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 添加到您的数据表中，否则您将数据表初始化两次，这是不允许的。

推荐阅读