下拉过滤器jquery数据表

Question

这是我的代码:

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $('#example').dataTable({
        "oLanguage": {
            "sSearch": "Search all columns:"
        },
        "iDisplayLength": 10,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bFilter": true,
    }); 

    /* Add a select menu for each TH element in the table footer */
    $("thead th").each( function ( i ) {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } );
    } );        
} );

我使用jquery datatables插件,它的工作方式与此示例完全相同:

http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

我想要做的是,而不是每列的下拉列表,我只想在一个特定的列上下拉列表.

所以我认为我需要改变:

$("thead th").each( function ( i ) {

但我不知道该放什么.任何帮助将非常感谢,提前感谢.

Answer 1

您还可以创建自己的选择列表,并将其放在表格外的任何位置.

<select id="mySelect">
    <option value=""></option>
    <option value="1">1</option>
    ...
</select>

<script>
    $('#mySelect').on('change',function(){
        var selectedValue = $(this).val();
        oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg
    });
<script>

Answer 2

如果您只需要在一列上就能做到

var indexOfMyCol = 2;//you want it on the third column
$("thead th").each( function ( i ) {
    if(i === indexOfMyCol){ 
      this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
      $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
      } );
    }
} );