Объединение HTML-формы с запросом Datatables ajax

Question

Привет! Я работаю с плагином JQuery djangorestframework-datatables и datatables.

Я загружаю большую таблицу (около 15000 записей, разбитых на страницы) с включенной опцией serverSide.Я включил эту опцию, потому что обработка на стороне клиента занимала слишком много времени для загрузки таблицы (даже с deferLoading).

Я хочу получить данные со следующего URL:

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

Проблема заключается в том, чтоЯ не могу понять, как я могу динамически изменить параметр device_id.Этот параметр определенно вводится пользователем.Вот как я это делал ранее (с обработкой на стороне клиента):

1) Пользователь вводит идентификатор устройства в форму.Форма отправляется.

2) Представление Django принимает запрос POST и возвращает отфильтрованный набор запросов в шаблон.

3) Набор запросов заполняет значения таблицы HTML, а таблицы данных обрабатывают остальное (нумерация страниц и т. Д.).)

Но теперь при обработке на стороне сервера мне не нужно представление django для возврата каких-либо наборов запросов.Я могу просто получить данные через AJAX.Мне нужно следующее поведение:

1) Пользователь открывает страницу, отображается пустой набор данных с приглашением ввести идентификатор устройства.

2) Пользователь вводит идентификатор устройства, и набор данных загружаетсяс записями для этого идентификатора устройства.

Но ajax-запрос datatables вызывается только тогда, когда кто-то путается с datatable (например, изменить страницу или выбрать длину страницы).Я хочу вызвать запрос ajax, когда кто-то вводит device_id в мою форму, и динамически приказывает 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 заставило меня почесать голову, любая помощь приветствуется!

ОБНОВЛЕНИЕ: Я попытался добавить простую переменную, чтобы получить device_id из элемента формы, но он не добавляется в мой URL ... как мне распечатать мой URL на DOM?(Я проверяю только вкладку сети на инструментах Chrome Dev ...) Конечно, моя форма даже не вызывает запрос ajax, так что это еще одна проблема.

Answer 1

Сначала вам нужно объявить переменную для хранения DataTable и вызвать ее из вашего javascript.

Пример:

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

Затем вы создаете функцию, которая запускает загрузку данных вyour 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 при изменении входа, вы можете вызвать функцию on change в jQuery.

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