使用下拉列表过滤表(dataTables)
使用下拉列表过滤表(dataTables)
提问于 2011-08-13 05:03:18
我使用的是dataTables jQuery插件(这个插件非常棒)，但是我无法让我的表根据选择框的变化进行过滤。
功能：
$(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：
<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>表继续显示一大堆项目，直到"Group 6"，但您已经明白了。以前有没有人试过这样做？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-13 05:33:07
dataTables features
我知道我以前做过这样的事情，你必须注意这一小段信息：
请注意，如果您希望在DataTables中使用过滤，则必须保持'true‘-要删除默认过滤输入框并保留过滤功能，请使用sDom。
您需要设置{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() );
});
});根据文档，在{bFilter:false};时oTable.fnFilter( $(this).val() );的代码将不会触发
Stack Overflow用户
发布于 2017-08-28 15:39:47
$.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>' )
} );
} );
},
} );Stack Overflow用户
发布于 2018-10-25 13:43:12
使用以下代码：
$('.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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7046308
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号