Блог

Я пытаюсь добавить поиск по столбцам к некоторым столбцам в таблице (используя таблицы данных). Я добавляю поле ввода для поиска в каждую ячейку заголовка таблицы. Datatables делает так, что каждый раз, когда вы нажимаете на заголовок, он изменяет метод сортировки, поэтому я вставил .stopPropagation прикрепленный к событию on click для поля ввода, чтобы не изменять сортировку по столбцу при нажатии на входную часть ячейки заголовка. Единственная проблема заключается в том, что .stopPropagation работает и не выполняет сортировку, но при нажатии на поле ввода он не позволяет мне добавлять текст в поле. Я не уверен, что я делаю неправильно. Вот фрагмент кода (он помещен в код для создания каждой таблицы на нашем сайте):

 var columnsearch = $(this).find('th');
        columnsearch.each(function () {
        var title = $(this).text();
        $(this).append( '<input type="search" placeholder="Search ' title '" />' );
        })

        var textbox = $(this).find('input')
        textbox.click(function (event) {
            event.stopPropagation();
        })
 

После некоторого изучения я выяснил, используя часть прослушивателей событий инспектора Chrome, и обнаружил, что функция, которую мы включили в таблицах данных, colReorder, используемая для перестановки столбцов, вмешивалась в функциональность поля ввода конфликтующим mousedown событием. Я добавил:

 textbox.mousedown(function(event){
            event.stopPropagation();
        })
 

для поиска по столбцу JS, и это устранило проблему.