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

Posted 2023-02-24

【中文标题】将 HTML 表单与 Datatables ajax 请求相结合

【英文标题】：Combining HTML Form to Datatables ajax request

【发布时间】：2020-01-26 12:11:38

【问题描述】：

您好，我正在使用 djangorestframework-datatables 和 datatables 的 JQuery 插件。

我正在加载一个启用了 serverSide 选项的大表（大约 15000 个条目，分页）。我启用了这个选项，因为客户端处理加载表的时间太长（即使使用 deferLoading）。

我想从以下 URL 检索数据：

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

问题是，我不知道如何动态更改 device_id 参数。该参数绝对是用户输入。以下是我之前的做法（使用客户端处理）：

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

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

3) 查询集填充 html 表值，数据表处理其余部分（分页等）

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

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

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

但是数据表的 ajax 请求只有在有人弄乱数据表时才会被调用（例如更改页面或选择页面长度）。当有人在我的表单中输入 device_id 并动态告诉 ajax 创建正确的 URL 时，我想调用 ajax 请求。

这是我的 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 的不熟悉让我摸不着头脑，感谢任何帮助！

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

【参考方案1】：

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

例子：

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

然后，您创建一个触发在您的 deviceInputsTable 中加载数据的函数，类似于：

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()

我希望这会有所帮助。

编辑，关于您在下面的评论：

您可以使用普通的 jQuery ajax 调用。像这样的：

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());
);

【讨论】：

您好，谢谢您的回答。我已经分配了一个变量来存储我的表并添加了你的函数。 // do the ajax call here 部分，我如何在那里进行 ajax 调用？当我的 device_id 输入元素发生变化时，如何触发此功能？我尝试了 onchange 和其他一些事件，但无法触发...

现在我重新阅读了您的回答，我意识到您所说的“您可以使用普通的 jquery ajax 调用”是什么意思，当时我对 ajax 和 jquery 都很陌生，以至于我没有知识。感谢您的帮助。

【参考方案2】：

使用datatable's API 解决了这个问题，我的问题是关于根据用户输入动态更改 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();

这样做给了我最终的 URL：“/api/device_input/?format=datatables&device_id=1”（如果用户输入 1）解决了我的问题。