Поле ввода не очищается при обновлении в некоторых браузерах при использовании DataTables - PullRequest
Новая
       20

Поле ввода не очищается при обновлении в некоторых браузерах при использовании DataTables

1 голос
/ 19 апреля 2019

У меня есть маленький код в DataTables.net, отвечающий за отображение таблицы. 

    <script>
        $(document).ready(function () {
            // Setup - add a text input to each header cell
            $('#DT-GRvWJTAH thead th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" />');
            });
            // Setup - add a text input to each footer cell
            $('#DT-GRvWJTAH tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="' + title + '" />');
            });
            //  Table code
            var table = $('#DT-GRvWJTAH').DataTable({
                "dom": "Bfrtip",
                "buttons": [
                    "copyHtml5",
                    "excelHtml5",
                    "csvHtml5",
                    "pdfHtml5"
                ],
                "colReorder": true,
                "paging": true,
                "scrollCollapse": false,
                "pagingType": [
                    "full_numbers"
                ],
                "lengthMenu": [
                    [
                        15,
                        25,
                        50,
                        100
                    ],
                    -1,
                    [
                        15,
                        25,
                        50,
                        100
                    ],
                    "All"
                ],
                "ordering": true,
                "order": [

                ],
                "info": true,
                "procesing": true,
                "responsive": {
                    "details": true
                },
                "select": true,
                "searching": true,
                "stateSave": true
            });
            // Apply the search for header cells
            table.columns().eq(0).each(function (colIdx) {
                $('input', table.column(colIdx).header()).on('keyup change', function () {
                    table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
                });

                $('input', table.column(colIdx).header()).on('click', function (e) {
                    e.stopPropagation();
                });
            });
            // Apply the search for footer cells
            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                });
            });
        });
    </script>

Полный код здесь: https://codepen.io/przemyslawklys/pen/jRxLRy

Это простая таблица с включенной фильтрацией. Проблема в том, что вы фильтруете какой-то столбец и нажимаете клавишу F5, чтобы обновить значение из поля ввода, удаляется, но фильтрация остается. Если вы войдете в этот фильтр и нажмете клавишу Backspace, он снова начнет работать. Значение там, просто невидимое.

enter image description here

Теперь в моей Chrome Canary такой проблемы нет, но я вижу ее в других браузерах. Я даже вижу тот же Chrome, когда код размещен в коде пера, так что он явно там.

Как я могу решить это? Я вижу 2 варианта:

  • заставить фильтр правильно отображаться, чтобы пользователь знал
  • удалить все фильтры при обновлении

Но как на моем примере я могу это сделать? Я пытался играть с ним, но безуспешно.

1 Ответ

1 голос
/ 22 апреля 2019

Это потому что у вас есть 

"stateSave": true

Ваша фильтрация столбцов сохраняется вместе со всеми другими настройками, скорее всего, в localStorage, и когда вы нажимаете F5, предыдущее состояние восстанавливается. Но у вас нет кода, который заполнял бы ввод поисковыми терминами saveState ..! Таким образом, вы получаете отфильтрованные данные с пустыми полями ввода.

Вы можете получить / установить свойства saveState несколькими способами; обработчик событий будет работать с приведенным выше кодом, но вы должны рассмотреть что-то более продуманное: 

$('#DT-GRvWJTAH').on('stateLoaded.dt', function(e, settings, data) {
  settings.aoPreSearchCols.forEach(function(col, index) {
    if (col.sSearch) setTimeout(function() {
      $('#DT-GRvWJTAH thead th:eq('+index+') input').val(col.sSearch)
    }, 50)
  })
})

Посмотрите на stateSaveParams / stateLoadParams, где вы можете установить / получить состояние для входов вашего столбца.

...