Uncaught TypeError: table.search(...). Draw не является функцией

Добавлена фильтрация в плагин jQuery DataTables, и он работает не очень хорошо.

Я хочу иметь две ссылки, которые будут искать записи по конкретным поисковым словам. Чтобы понять, как это сделать, я сначала попытался использовать этот пример. Он использует поле ввода для поиска значений в таблице. Он генерирует эту ошибку:

Uncaught TypeError: table.search(...). Draw не является функцией

Мой код:

$(document).ready(function() {
    $('#store-list').dataTable({
        "sPaginationType": "full_numbers"
    });

    var table = $('#store-list').DataTable();   

    $('#myFilter').on( 'keyup', function () {
    table
        .search( this.value )
        .draw();
    } );
});

Я пробовал разные вещи, чтобы сделать эту работу:

Поменялись местами .DataTable() с .dataTable().api() и .dataTable()
Попробовал ( this.val() ) и ( $('#myFilter').val() ) (ссылка)
Пробовал table.search( this.value ).draw; (без ())
В отчаянии я пытался без search, а затем без draw

Может кто-нибудь, пожалуйста, помогите мне найти ошибку?

Ответ 1

ПРИЧИНА

Вы используете плагин DataTables 1.9.4, но API-методы и пример для более новой версии 1.10.x.

API-методы изменились, когда плагин DataTables был обновлен до версии 1.10, см. Преобразование имен параметров для 1.10 для деталей.

РЕШЕНИЕ № 1

Обновите библиотеку DataTables до версии 1.10, чтобы использовать метод API search().

РЕШЕНИЕ # 2

Если вы по какой-то причине не можете перейти на версию 1.10, используйте приведенный ниже код. Аналогичный пример приведен в версии 1.9, см. Пример отдельной фильтрации столбцов DataTables.

Для DataTables 1,9

$(document).ready(function(){

    $('#store-list').dataTable({
        "sPaginationType": "full_numbers"
    });

    $("#myFilter").on('keyup', function (){
        $('#store-list').dataTable().fnFilter(this.value);
    });
});

См. fnFilter Ссылка на API для дополнительных необязательных параметров.

Ответ 2

Эта работа для меня:

var table = $('#campaniasVinculadas').DataTable();

$('#myFilters input').on( 'keyup', function () {
    table
        .search( this.value )
        .draw();
});

Я использую селектор '#myFilters input', потому что id "#myFilters" для Tfoot не имеет атрибута "value", но "input" имеет атрибут value.

Ответ 3

Просто убедитесь, что с соглашениями об именах

Если вы используете удаленную таблицу данных Инициализируйте таблицу данных со следующим синтаксисом

var table = $('#store-list').DataTable();

вместо

var table = $('#store-list').dataTable();

консольная переменная table

console.log(table)

Он покажет вам все удаленно доступные свойства

$: ƒ() ajax: {dt_wrapper: true, json: ƒ, params: ƒ, перезагрузка: ƒ, url: ƒ} ячейка: ƒ() ячейки: ƒ() очистить: ƒ() столбец: ƒ() столбцы: ƒ() контекст: [{…}] данные: ƒ() уничтожить: ƒ() ничья: ƒ() i18n: ƒ() init: ƒ() выкл: ƒ() на: ƒ() один: ƒ() заказ: ƒ() страница: ƒ() строка: ƒ() строки: ƒ() поиск: ƒ() селектор: {row: null, cols: null, opts: null} настройки: ƒ() состояние: ƒ() таблица: ƒ() таблицы: ƒ() __proto: объект (0)

dataTable будет работать без проблем, если вы используете таблицу данных клиента