Question

У меня в настоящее время есть таблица данных с определенной шириной.

Теперь я хотел добавить фильтрацию столбцов как официальный пример но когда я добавляю код в таблицу, таблица становится слишком большой, так как ширина области слишком мала.

Что нужно сделать, чтобы текстовые входные данные имели тот же размер, что иоригинальный заголовок? (Так что я хочу именно такую таблицу, как в примере № 1, но со строкой фильтрации столбцов.)

Пример с кодом фильтрации столбцов

Простой код из codepen:

HTML:

<div style="width: 1370px; font-size:14px;">
<table id="example" class="table table-striped table-bordered">
          <thead>
              <tr>
                  <th>Hostname</th>
                  <th>Film</th>
                  <th>AktlHelewafe Version</th>
                  <th>BntlNiJus Version</th>
                  <th>NntjGpuwllre Version</th>
                  <th>AA</th>
                  <th>RR</th>
                  <th>Letzter Keickvcen</th>
                  <th>Letzter Hujlsken</th>
                  <th>Ausstehende Vorgänge</th>
                  <th>Besnakmefojlen</th>
                  <th>Stand</th>
                  <th></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.13.17134.619</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                 <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
              <tr>
                  <td>Tiger Nixon</td>
                  <td>Systemt</td>
                  <td>4.18.1902.5</td>
                  <td>1.303.522.0</td>
                  <td>1.303.522.0</td>
                  <td>X</td>
                  <td>X</td>
                  <td>7 Days</td>
                  <td>7 Days</td>
                  <td></td>
                  <td>XXXXXXXXXX</td>
                  <td>30.09.2019 15:31:41</td>
                  <td>XX</td>
              </tr>
          </tbody>
      </table>
</div>

CSS:

body{
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

Javascript # 1:

$(document).ready(function() {
    var table = $("#example").DataTable({
                orderCellsTop: true,
                fixedHeader: true,
                scrollingCollapse: true,
                paging: false,
                searching: false,
                info: false,
                scrollCollapse: true,
                scrollY: "35vh",
                'createdRow': function(row, data, dataIndex){
                    $('td:eq(11)', row).css('min-width', '126px');
                }
            });
} );

Javascript # 2:

$(document).ready(function() {
    $('#example thead tr').clone(true).appendTo( '#example thead' );
    $('#example thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" />' );

        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
    var table = $("#example").DataTable({
                orderCellsTop: true,
                fixedHeader: true,
                scrollingCollapse: true,
                paging: false,
                searching: false,
                info: false,
                scrollCollapse: true,
                scrollY: "35vh",
                'createdRow': function(row, data, dataIndex){
                    $('td:eq(11)', row).css('min-width', '126px');
                }
            });
} );

Imthath · Answer 1 · 30 октября 2019

Только что я добавил

style="width:100%"

в следующую строку вашего кода JavaScript

'<input style="width:100%" type="text" />'

Это сработало

Возможна поставка данных с фильтрацией столбцов, но с той же шириной, что и без

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Возможна поставка данных с фильтрацией столбцов, но с той же шириной, что и без

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы