Как добавить фильтры с множественным выбором в DataTable с фиксированным заголовком? - PullRequest
Новая
       10

Как добавить фильтры с множественным выбором в DataTable с фиксированным заголовком?

0 голосов
/ 16 июня 2020 
    $(document).ready(function() {
  function cbDropdown(column) {
    return $('<ul>', {
      'class': 'cb-dropdown'
    }).appendTo($('<div>', {
      'class': 'cb-dropdown-wrap'
    }).appendTo(column));
  }

  $('#example').DataTable({


    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;
        var ddmenu = cbDropdown($(column.header()))
          .on('change', ':checkbox', function() {
            var active;
            var vals = $(':checked', ddmenu).map(function(index, element) {
              active = true;
              return $.fn.dataTable.util.escapeRegex($(element).val());
            }).toArray().join('|');

            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();

            // Highlight the current item if selected.
            if (this.checked) {
              $(this).closest('li').addClass('active');
            } else {
              $(this).closest('li').removeClass('active');
            }

            // Highlight the current filter if selected.
            var active2 = ddmenu.parent().is('.active');
            if (active && !active2) {
              ddmenu.parent().addClass('active');
            } else if (!active && active2) {
              ddmenu.parent().removeClass('active');
            }
          });

        column.data().unique().sort().each(function(d, j) {
          var // wrapped
            $label = $('<label>'),
            $text = $('<span>', {
              text: d
            }),
            $cb = $('<input>', {
              type: 'checkbox',
              value: d
            });

          $text.appendTo($label);
          $cb.appendTo($label);

          ddmenu.append($('<li>').append($label));
        });
      });
    },
    paging: false,
                sort: false,
                scrollY: 500,
                scrollX: true,
                select: true,
                fixedColumns: {
                    leftColumns: 2
                },

      });
    });

Выше приведен код, который мы используем.

Выпадающий фильтр с множественным выбором работает нормально, но когда мы используем заголовок исправления, он сжимается, и фиксированный заголовок также не работает.

1 Ответ

0 голосов
/ 16 июня 2020

Привет, попробуйте следующий код 

.cb-dropdown {
position: relative;

надеюсь, что это поможет, извинения предложены неправильно.

здесь js ссылка на скрипт https://jsfiddle.net/0nqk1jsu/3/

...