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/

如何更改页面加载设置

1 个答案: