Как изменить настройку загрузки страницы

Question

В основном я хочу изменить то, что отображается на странице, когда она изначально загружена. Прямо сейчас «маргаритка» отображается автоматически. Я хотел бы, чтобы при загрузке страницы ничего не отображалось, а затем было бы возможность выбрать нужное растение. Я знаю, что могу просто добавить пустую строку таблицы, но не хочу, чтобы в поле выбора было слишком много пустого пространства.

    <h2>Recommeded Settings</h2>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr id="filters">
      <th>Select Plant</th>

      <td>Temperture</td>
      <td>Moisture</td>
      <td>Humidity</td>
      <td></td>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>Daisy</td>
      <td>68.0</td>
      <td>1</td>
      <td>2</td>
      <td></td>
    </tr>
    <tr>
      <td>Rose</td>
      <td>74.4</td>
      <td>3</td>
      <td>4</td>
      <td></td>
    </tr>
    <tr>
      <td>Sunflower</td>
      <td>74.0</td>
      <td>5</td>
      <td>6</td>
      <td></td>
    </tr>
    <tr>
      <td>Tulip</td>
      <td>68.0</td>
      <td>7</td>
      <td>8</td>
      <td></td>
    </tr>


  </tbody>
</table>

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true,
    ordering: false,
    dom: 'Bfrt',
        lengthMenu: [
            [ 1 ],
            [ '1 row' ]
        ],
        buttons: [
            'pageLength'
        ],
    initComplete: function() {
      this.api().columns().every(function() {
        var column = this;

        var select = $('<select><option value="Select"></option></select>')
          .appendTo($("#filters").find("th").eq(column.index()))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val());

            column.search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        console.log(select);

        column.data().unique().sort().each(function(c, j) {
          $(select).append('<option value="' + c + '">' + c + '</option>')
        });
      });
    }
  });
});

jsfiddle

Answer 1

Я не думаю, что это лучше, но это обходной путь

Я не нахожу способ не показывать данные, поэтому в начале initComplete я добавил следующее, чтобы выполнить поиск сстрока, которая не соответствует ни одной записи

initComplete: function () {
//initial search to hide the data
    this.api().columns( 0 )
    .search( 'imposible text' )
    .draw();

        this.api().columns().every( function () {

            var column = this;

            var select = $('<select><option value=""></option></select>')
                .appendTo( $(column.header()) )
                .on( 'change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search( val ? '^'+val+'$' : '', true, false )
                        .draw();                            
                } );

            column.data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' )
            } );

        } );

    }

http://jsfiddle.net/k3chL5zp/