как передать параметры при перезагрузке таблиц данных

#javascript #jquery #ajax #datatables #jquery-datatables

#javascript #jquery #ajax #таблицы данных

Вопрос:

У меня есть таблица данных, которую я инициализирую следующим образом:

 mytable = DataTable({
        ajax:{
            url: "/url/getTableData",
            dataSrc: ""

        },
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
    });

позже я хотел бы сделать

 mytable.ajax.reload();

Это работает нормально, но теперь я хотел бы отправить несколько параметров в этом запросе. Эти параметры мне нужны только при перезагрузке, а не при инициализации таблицы.
Как мне это сделать?
Спасибо!

1. Вы вообще читали документацию? Похоже, вы можете использовать любой из них прямо перед перезагрузкой: datatables.net/reference/api/ajax.url () и datatables.net/reference/option/ajax.data

2. Я прочитал документацию, но не смог найти ответ. Я не хотел менять URL, только параметры. И я не уверен, что использование URL, как вы предложили, помогает мне в этом смысле, хотя это, действительно, решение.

3. В зависимости от того, что вы имели в виду под «несколькими параметрами», изменение URL было опцией (добавление строки запроса). Но если вы хотите передать данные в теле запроса POST, тогда используйте мою вторую ссылку ( datatables.net/reference/option/ajax.data ) — Я почти уверен, что это гораздо лучший пример, чем принятый вами ответ, и, похоже, это именно то, что вы пытаетесь сделать, а не хакерское решение для этого

4. похоже, это правильный ответ. Я попробую это. Большое вам спасибо за объяснение этого.

Ответ №1:

Вариант 1 — Использовать событие preXhr.dt.

 table = $('#example')
    .on('preXhr.dt', function ( e, settings, data ) {
        data.whateveryouwant = $("#someidhere").val()
        data.anotherexample = "kittens"
    } )
// then just setup your datatable as normal
    .DataTable({
        ajax:{
            url: "/url/getTableData",
            type: "GET" // This is the default value, could also be POST
        },
        sortClasses: false,
        paging: false,
        scrollY: 300,
        columns: cols
});

смотрите здесь http://datatables.net/reference/event /

Вариант 2 (предпочтительный) — Использовать функцию ajax.data.

 table = $('#example').DataTable({
    ajax:{
        url: "/url/getTableData", // Change this URL to where your json data comes from
        type: "GET", // This is the default value, could also be POST, or anything you want.
        data: function(d) {
            d.whateveryouwant = $("#someidhere").val()
            d.anotherexample = "kittens"
        }

    },
    sortClasses: false,
    paging: false,
    scrollY: 300,
    columns: cols
});

Оба варианта дают идентичные результаты. Ваш сервер не заметит разницы. Дополнительные данные будут добавлены на каждом table.ajax.reload() . Дополнительные данные будут:

whateveryouwant из со значением #someidhere элемента, и

anotherexample со значением "kittens"

Я предпочитаю вариант 2, потому что более очевидно, что дополнительные данные добавляются при каждом запросе. Я думаю, что первый вариант немного хитрый и не такой очевидный для кого-то другого, читающего ваш код.

1. Спасибо за отличный ответ ( 1). Короткий вопрос: почему не работает {data: «whatEverYouWant»: $(«#someidhere»).val() ), потому что это не работает, но с функцией работает? Я новичок в javascript

Ответ №2:

Мой вариант использования отличается тем, что я не хочу постоянно изменять действие ajax для страницы. Для меня это работает, чтобы изменять вызовы ajax только при нажатии кнопки обновить, что означает, что серверные вызовы (т. Е. Для сортировки таблиц и т.д.) Могут иметь другое поведение:

     // Create a refresh button
    $.fn.dataTable.ext.buttons.refresh = {
        text: 'Refresh',
        action: function ( e, dt, node, config ) {
          var origurl = dt.ajax.url();
          dt.ajax.url(origurl "?forcereload=true").load();
          dt.ajax.url(origurl);
        }
    };