下拉过滤器 jquery 数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9616841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dropdown filter jquery datatables
提问by Codded
Here is my code:
这是我的代码：
$(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 );
} );
} );
} );
Im using the jquery datatables plugin, its working perfectly just like this example:
我正在使用 jquery 数据表插件，它就像这个例子一样完美地工作：
http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html
http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html
What i would like to do is rather than having a dropdown for each column i would like a dropdown only on one specific column.
我想要做的是，而不是为每一列都有一个下拉列表，我只想在一个特定的列上有一个下拉列表。
So i presume i need to change:
所以我想我需要改变：
$("thead th").each( function ( i ) {
But im not sure what to put. Any help would be much appreciated, thanks in advance.
但我不知道该放什么。任何帮助将不胜感激，提前致谢。
采纳答案by Nicola Peluchetti
If you need only on one column you could do
如果你只需要一列，你可以做
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 );
} );
}
} );
回答by crashtestxxx
You can also create your own select list and position it anywhere you like outside the table.
您还可以创建自己的选择列表并将其放置在表格外的任何您喜欢的位置。
<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>
回答by pjammer
Maybe times have changed, but with no plugin and using dataTables1.10.12and it's @api, as a person in the comments suggested, you can use the zero based index integer from an array for the corresponding table. Example code, important bits are on line 2below. I'm searching just on the 4th column, and this is coffeescript but you get the idea.
也许时代变了，但没有插件，使用数据表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
回答by Jovan MSFT
You can use date tables column filter see http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html
您可以使用日期表列过滤器，请参阅http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html
It is a second level plugin for datatables.
它是数据表的二级插件。
Jovan
约万
回答by shanmugavel
You can use the columnfilter plugin...
您可以使用 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" }
]
});
});
回答by Amritpal Singh
I think something like following might do the trick
我认为像下面这样的事情可能会奏效
$("thead th").each( function ( i ) {
if(i==1)
{
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
}
} );
回答by AjithKumar
<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();
});
});
