下拉式过滤器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数据表插件，它的工作原理很好，就像这个例子一样：

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

我想做的不是每列都有一个下拉列表，而是只在一个特定的列上有一个列表。

所以我想我需要改变：

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

但我不知道该怎么说。如有任何帮助，我们将不胜感激，提前表示感谢。

Answer 1

您还可以创建自己的选择列表，并将其放置在表外任何您喜欢的位置。

<select id="mySelect">
    <option value="">Select</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 );
      } );
    }
} );   

Answer 3

也许时代已经改变了，但如果没有插件，使用dataTables 1.10.12，它是@api，正如评论中的一个人所建议的那样，您可以为相应的表使用数组中的从零开始的索引整数。示例代码，重要位在下面的2线上。我只在第4栏搜索，这是咖啡脚本，但你会明白的。

    $('#example').DataTable initComplete: ->
                    @api().columns([3]).every ->
                            column = this
                            select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', ->
                                    val = $.fn.dataTable.util.escapeRegex($(this).val())
                                    column.search(val ? '^'+val+'$' : '', true, false).draw()
                                    return
                            )
                            column.data().unique().sort().each (d, j) ->
                                    select.append '<option value="' + d + '">' + d + '</option>'
                                    return
                            return
                    return

Answer 4

您可以使用日期表列过滤器查看http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

它是数据表的二级插件。

Jovan

Answer 5

您可以使用columnfilter插件。。。

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

Answer 6

我认为下面这样的东西可能会起到的作用

$("thead th").each( function ( i ) {
    if(i==1)
    {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } ); 
    }
} );  

Answer 7

<select id="dropdown1">
<option value="">Select</option>
<option value="London">London</option>
<option value="San Francisco">San Francisco</option>
</select>
$(document).ready(function() {
var table = $('#example').DataTable();
$('#dropdown1').on('change', function() {
table.columns(1).search(this.value).denter code hereraw();
});
});