Datatables ajax.reload () и .clear () не работает

Question

У меня есть раздел вкладок, созданный с помощью начальной загрузки 3. Для одной из вкладок содержимое вкладки является датируемым. Данные генерируются на стороне сервера и отлично работают при начальной загрузке. Тем не менее, я пытаюсь использовать ajax.reload () внутри функции onchange, и данные не обновляются. Я также пытался использовать метод clear (), но данные не очищаются. Я проверил, что функция запускается и что возвращаемый ответ AJAX является допустимым JSON, а не пустым. В моей консоли нет ошибок, просто ничего не происходит.

Я использую Datatables 1.10, а источник напрямую из cdn (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js).

Я искал StackOverflow и форум Datatbles для этой проблемы. у других это было, и похоже, что принято решение $('#TableID').DataTable().ajax.reload(), которое я делаю. Я также попытался сохранить таблицы данных в таблице var и попробовать table.ajax.reload (), а также передать функцию обратного вызова и явно установить обновление страницы на true. Я возвращаюсь из функции обратного вызова, но ошибок по-прежнему нет, но изменений нет.

HTML:

<div id="tab_datatable" class="tab-pane fade">          
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Year</th>
                <th>Course</th>
                <th>Title</th>
                <th>Enrollment</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Мой код js создает таблицу, которая отлично работает:

$( document ).ready(function() {
    var $table = $('#example').DataTable({
    scrollCollapse: false,
    paging: true,
    pagingType: 'simple_numbers',
    lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
    processing: true,
    serverSide: true,
    ajax: {
        url: myURL,
        data: {
            campus: $campus.val(),
            college: $college.val(),
            year: $term.val(),
            draw: parseInt(1),
            length: (10),
            start: parseInt(1)
        }
    },
    searching: false,
    info: false,

});
});

Таблица отображается правильно в "примере" div.

У меня есть функция updatePage (), которая срабатывает при изменении одного из трех параметров меню на странице.

$(document).on('change', '.dynamic', function(){
    updatePage();
});

//Updates dynamic content on page
function updatePage()
{       
    //sessionStorage
    sesssionStateStorage('campus', $campus.val());
    sesssionStateStorage('college', $college.val());
    sesssionStateStorage('term', $term.val());

    console.log($term.val()); //confirming that value is updating

    //Refresh datatable
    console.log($table);  //Shows table object so I know it exists

   //$table.clear();   //This does't work;  no errors but no change
   //$table.ajax.reload() //doesn't work; no errors but no change
   //$('#example').DataTable().ajax.reload();  //doesn't work; no errors but no change
    $('#example').DataTable().ajax.reload(test(), true);  //Confirming that I see test logging from test() function, but data still doesn't update

}

function test()
{
   console.log('in test');
   console.log('table object: ' + $table)
}

Любая помощь очень ценится.

РЕДАКТИРОВАТЬ: Забыл указать, что я также отслеживаю сетевые вызовы в своей консоли, и когда изменяется одно из значений меню, я вижу, что инициируется новый вызов AJAX и возвращаются правильные данные. Таким образом, проблема в действительности заключается в том, что таблица не отображается должным образом после ajax.reload ().

Answer 1

В моем коде я без необходимости включал параметры draw, length и start. Я сделал это, потому что заметил, что когда я пытался вернуть свои параметры данных как функцию, эти элементы не передавались (из-за отсутствия этих параметров мой запрос к базе данных не выполнялся на сервере), несмотря на документация о том, что Datatbles отправит их автоматически .

Это происходило потому, что я не передавал объект данных в созданную мной функцию.

Вот что было у меня изначально, а значения не обновлялись; всякий раз, когда я использовал table.ajax.reload (), исходные данные все еще передавались:

ajax: {
    url: myURL,
    data: {
        campus: $campus.val(),
        college: $college.val(),
        year: $term.val()
    }
}

Вот что я попробовал затем, возвращая параметры как функцию:

ajax: {
    url: myURL,
    data: { function() {
               return { campus: $campus.val(), college: $college.val(), year: $term.val(),}

}

Здесь я заметил, что параметры draw, start и length не передаются. Первоначальный вопрос включал в себя другой вариант, который я попробовал, и который я просто привожу здесь, чтобы все было понятно

ajax: {
    url: myURL,
    data: {
        campus: $campus.val(),
        college: $college.val(),
        year: $term.val(),
        draw: parseInt(1),
        length: (10),
        start: parseInt(1)
    }
},

Вот правильный путь:

    ajax: {
        url: myURL,
        data: function (d) {
            d.campus = $campus.val();
            d.college = $college.val();
            d.year = $term.val();
        }       
    }

Таким образом, если вы используете обработку на стороне сервера в DataTables и параметры данных, которые вы отправляете в обновлениях вызова ajax, вам нужно возвращать параметры как функцию, чтобы они обновлялись каждый раз, когда новый вызов ajax выполняется с table.ajax.reload () (в противном случае вы сохраните начальные данные). Однако функция должна передавать внутренний объект данных DataTables, поэтому при выполнении запроса DataTablesw будет отправлять некоторые параметры вместе с запросом. Отправленные параметры подробно описаны в документации здесь: https://datatables.net/manual/server-side