如何实现数据表选择过滤器答案

【问题标题】：how to implement datatables select filter如何实现数据表选择过滤器
【发布时间】：2015-01-21 17:51:03
【问题描述】：

这是我的屏幕

我正在尝试使用数据表

我在主页上有这个

$('#student-listing-table').dataTable();
$('#student-listing-table').find('label').html('Search By Name');
$('.dataTables_filter').wrap('<div class="Filter_wrap"><label>Account Status: <select name="Accountstatus" class="AccountstatusOption searchFilterAdded"><option value="1">Active</option><option value="2">Blocked</option></select></label><label>Availability: <select name="Avialbility" class="AvialbilityStatus searchFilterAdded"><option value="1">Online</option><option value="2">Offline</option></select></label></div>');

这是我的桌子

<table class="student-listing-table" id="student-listing-table">
  <thead>
    <tr>
      <th>
        Photo
      </th>
      <th>
        Contact Details
      </th>
      <th>
        Taxi Plate Number
      </th>
      <th>
        License Number
      </th>
      <th>
        Activation Code
      </th>
      <th>
        Account Status
      </th>
      <th>
        Availablity
      </th>
      <th>
        Action
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="studen-list-photo">


          <img src="http://localhost/masnataxi/public/assets/uploads/driverimage/AC6751-DriverPhoto.png" class="student-listing-photo" alt="Driver Photo">
        </div>
      </td>

      <td>
        <span class="drive-name">
          Sulthan Allaudeen
          </span>

          <span class='drive-phone'>
            9042445010
          </span>
              </td>
              <td>
                taxi no plate
              </td>
              <td>
                9999
              </td>
              <td>
                AC6751
              </td>
              <td>

                <span class='account-blocked'>
                </span>
                <td>
                  <span class='avial-offline'>
                  </span>
              </td>
              <td>

                <a href="http://localhost/masnataxi/editdriver/3">
                  <button class="edtit-btn btn-sm">
                    <span class="icon">
                    </span>
                  </button>
                </a>
                <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/3" class="btnOpenDialog">
                  <button class="delete-btn btn-sm">
                    <span class="icon">
                    </span>
                  </button>
                </a>
              </td>
          </tr>
          <tr>
            <td>
              <div class="studen-list-photo">


                <img src="http://localhost/masnataxi/public/assets/images/profile-inner.png" class="student-listing-photo" alt="Driver Photo">
              </div>
            </td>

            <td>
              <span class="drive-name">
                ram kumar
              </span>

              <span class='drive-phone'>
                9042445010
              </span>
            </td>
            <td>
              taxi no plate
            </td>
            <td>
              9999
            </td>
            <td>
              AC7262
            </td>
            <td>

              <span class='account-active'>
              </span>
              <td>
                <span class='avial-offline'>
                </span>
            </td>
            <td>

              <a href="http://localhost/masnataxi/editdriver/4">
                <button class="edtit-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
              <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/4" class="btnOpenDialog">
                <button class="delete-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <div class="studen-list-photo">


                <img src="http://localhost/masnataxi/public/assets/images/profile-inner.png" class="student-listing-photo" alt="Driver Photo">
              </div>
            </td>

            <td>
              <span class="drive-name">
                test tetete
              </span>

              <span class='drive-phone'>
                33
              </span>
            </td>
            <td>
              et
            </td>
            <td>
              te
            </td>
            <td>
              AC3031
            </td>
            <td>

              <span class='account-active'>
              </span>
              <td>
                <span class='avial-offline'>
                </span>
            </td>
            <td>

              <a href="http://localhost/masnataxi/editdriver/5">
                <button class="edtit-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
              <a href="javascript:;" id="http://localhost/masnataxi/deletedriver/5" class="btnOpenDialog">
                <button class="delete-btn btn-sm">
                  <span class="icon">
                  </span>
                </button>
              </a>
            </td>
          </tr>
  </tbody>
</table>

我尝试了这个link in Googlecode 来获取选择过滤器并尝试使用以下代码。当我更改下拉列表时它没有工作

注意：

我可以打印0 和1 以隐藏形式显示活动和非活动，这对选择过滤器有帮助吗？

我也从这个source尝试过

请帮助使用数据表实现选择过滤器。

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
             { type: "select" }
                ]

        });
});

更新：

$(document).ready(function() {
    $('#driver-listing-table').DataTable( {
        initComplete: function () {
            var api = this.api();

            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .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>' )
                } );
            } );
        }
    } );
    $('#driver-listing-table').find('label').html('Search By Name');
$('.dataTables_filter').wrap('<div class="Filter_wrap"><label>Account Status: <select name="Accountstatus" class="AccountstatusOption searchFilterAdded"><option value="1">Active</option><option value="2">Blocked</option></select></label><label>Availability: <select name="Avialbility" class="AvialbilityStatus searchFilterAdded"><option value="1">Online</option><option value="2">Offline</option></select></label></div>');

} );
</script>

【问题讨论】：

标签： php jquery html datatable datatables

【解决方案1】：

你不需要在你的 jquery 中有什么特别的东西

只需将 tfoot 包含在您的表格中

<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>

如果您使用数据表，它应该会自动为您填充下拉过滤器。

这是您需要在 head 部分中添加的唯一脚本

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            var api = this.api();

            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .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>' )
                } );
            } );
        }
    } );

 } );

【讨论】：