Javascript 将HTML表单与Datatables ajax请求相结合

大家好，我正在使用djangorestframework datatables和datatables的JQuery插件

我正在加载一个大约15000个条目的大表，在启用服务器端选项的情况下分页。我启用了此选项，因为即使延迟加载，客户端处理也要花费很长时间才能加载表

我想从以下URL检索数据：

/api/device_input/?format=datatables&device_id=something
// device_id can be 1, 2, 3 and so on.

问题是，我不知道如何动态更改设备id参数。这个参数肯定是用户输入的。下面是我以前使用客户端处理的方式：

1用户在表单中输入设备ID。表格被提交

2 Django视图接受POST请求并将过滤后的查询集返回给模板

3 queryset填充HTML表值，datatables处理其余分页等

但是现在使用服务器端处理，我不需要django视图来返回任何查询集。我可以通过ajax获取数据。我想要的行为是：

1用户打开页面，显示一个空数据表，并提示输入设备ID

2用户输入设备ID，数据表将加载该设备ID的记录

但datatables ajax请求仅在有人处理datatable（如更改页面或选择页面长度）时才会被调用。我想在有人将设备id输入我的表单时调用ajax请求，并动态地告诉ajax创建正确的URL

下面是我的javascript的外观：

<!-- Javascript function to initialize the datatable -->
<script>
    var device_id = document.getElementById("id_input").value
    $(document).ready(function() {
        $("#device_inputs_table").DataTable({
            "lengthMenu": [
                [10, 20, 30, -1],
                [10, 20, 30, "All"]
            ],
            fixedHeader: {
                headerOffset: 62
            },
            "order": [
                [0, "desc"]
            ],

            "serverSide": true,
            "ajax": "/api/device_input/?format=datatables&device_id=" + device_id, // need to add a number at the end that user will input
            "columns": [
                // All my table columns
            ]
        });
    });
</script>

我相信这很简单，但我对ajax和javascript的不熟悉让我摸不着头脑，非常感谢您的帮助

---

更新：我尝试添加一个简单的变量从表单元素获取设备id，但没有添加到我的URL。。。如何在dom上打印我的URL？我只是查看chrome开发工具上的网络选项卡。。。当然，我的表单甚至没有调用ajax请求，所以这是另一个问题。

首先需要声明一个变量来保存DataTable，并从javascript调用它

例如：

var deviceInputsTable = $('#device_inputs_table').DataTable({
// Rest of the table declaration goes here.
})

然后，创建一个函数，该函数触发在设备InputStable中加载数据，类似于：

function loadDeviceInputsTableData(deviceID){
device_id = deviceID // (get this from the input)
// do the ajax call here and this is the important part:
success: function(data){
    // This is just a rough scratch, but this is how you initially call the first data in the table, consequent calls will now be server-side since your device_id now has a value in the ajax call you showed above.
    deviceInputsTable.clear().rows.add(data).draw()
}
}

我希望这有帮助

编辑以下评论：

您可以使用普通的jqueryajax调用。大概是这样的：

function loadDeviceInputsTableData(deviceID){
device_id = deviceID;
            $.ajax({
                type: 'GET',
                url: `SomeURLhereAppendingthedeviceIDParameter`,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (response) {
                   // Transform the AJAX's response here and get the data to add to your data table below
                   deviceInputsTable.clear().rows.add(data).draw()
                }
            });
};

要在输入发生更改时再次触发ajax，可以在jQuery中调用on change函数

$('#id_input').on("change",function(){
loadDeviceInputsTableData($('#id_input').val());
});

---

这个问题通过使用解决了，我的问题是关于根据用户输入动态更改ajax url。以下是我所做的：

// Get device ID from wherever user inputs it, in my case it was a button with id: id_input
device_id = document.getElementById('id_input').value;

// Dynamically set your datatable's ajax URL to whatever you want. I concatenated the device id 
// string with my url string. ajax.url("your URL") is enough to set the URL
// .load() is for getting data from the new URL you've just set.

$('#device_inputs_table').DataTable().ajax.url(
            "/api/device_input/?format=datatables&device_id=" + device_id).load();

---

如果用户输入1解决了我的问题，那么这样做会给我最终的URL:/api/device\u input/？format=datatables&device\u id=1。

嘿，谢谢你的回答。我已经分配了一个变量来存储我的表，并在其中添加了您的函数。//在这里进行ajax调用部分，如何在那里进行ajax调用？当我的设备id输入元素发生变化时，如何触发此功能？我尝试了onchange和其他一些事件，但无法启动它……现在我重新阅读了您的答案，我意识到您的意思是可以使用普通的jquery ajax调用，当时我对ajax和jquery都非常不熟悉，不知道如何使用。谢谢你的帮助。