jQuery 使用下拉列表过滤表格（dataTables）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7046308/
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
Using a dropdown list to filter a table (dataTables)
提问by collin
I'm using the dataTables jQuery plugin (which is totally awesome), but I'm having trouble getting my table to filter based on the change of my select box.
我正在使用 dataTables jQuery 插件（这非常棒），但是我无法根据我的选择框的更改来过滤我的表格。
Function:
功能：
$(document).ready(function() {
$("#msds-table").dataTable({
"sPaginationType": "full_numbers",
"bFilter": false
});
var oTable;
oTable = $('#msds-table').dataTable();
$('#msds-select').change( function() {
oTable.fnFilter( $(this).val() );
});
});
HTML:
HTML：
<table border="0" cellpadding="0" cellspacing="0" id="msds-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<select id="#msds-select">
<option>All</option>
<option>Group 1</option>
<option>Group 2</option>
<option>Group 3</option>
<option>Group 4</option>
<option>Group 5</option>
<option>Group 6</option>
</select>
<tr class="odd">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
<tr class="even">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
<tr class="odd">
<td>Group 1</td>
<td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
<td><a href="#">Download</a></td>
</tr>
</tbody>
</table>
Table goes on to display a bunch of items, up to "Group 6", but you get the idea. Anyone ever tried to do this before?
表继续显示一堆项目，直到“第 6 组”，但您明白了。以前有人试过这样做吗？
回答by DefyGravity
I knew I had done this before, and you have to watch this little piece of information:
我知道我以前做过这个，你必须看这个小信息：
Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom.
请注意，如果您希望在 DataTables 中使用过滤，则必须保持“true” - 要删除默认过滤输入框并保留过滤功能，请使用 sDom。
you need to set {bFilter:true}, and move your <select></select>into a custom element registered through sDom. I can guess your code will look like this:
您需要设置 {bFilter:true}，并将您的移动<select></select>到通过 sDom 注册的自定义元素中。我猜你的代码会是这样的：
$(document).ready(function() {
$("#msds-table").dataTable({
"sPaginationType": "full_numbers",
"bFilter": true,
"sDom":"lrtip" // default is lfrtip, where the f is the filter
});
var oTable;
oTable = $('#msds-table').dataTable();
$('#msds-select').change( function() {
oTable.fnFilter( $(this).val() );
});
});
your code for oTable.fnFilter( $(this).val() );will not fire while {bFilter:false};according to the documentation
根据文档，您的代码oTable.fnFilter( $(this).val() );不会触发{bFilter:false};
回答by Imran
$.extend( true, $.fn.dataTable.defaults, {
"bFilter": true,
initComplete: function () {
this.api().column(1).every( function () {
var column = this;
var select = $('<select><option value="">All Subjects</option></select>')
.appendTo( $(column.header()).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>' )
} );
} );
},
} );
回答by Sapna
Use this code:
使用此代码：
$('.btn-success').on('click',function (e) {
//to prevent the form from submitting use e.preventDefault()
e.preventDefault();
var res = $("#userid").val();
var sNewSource = "<?php echo base_url(); ?>myaccount/MyData_select?userid=" + res + "";
var oSettings = ETable.fnSettings();
oSettings.sAjaxSource = sNewSource;
ETable.fnDraw();
});
