个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个简单的 jQuery 数据表，其中包含 4 列，其中一列是下拉列表。
<!-- HTML CODE -->
<body>
<table id="vendorListing">
<tfoot>
<tr>
<th class="searchBox">Vendor Location</th>
<th class="searchBox">Currency</th>
<th class="searchBox">Vendor Type</th>
<th class="searchBox">Vendor</th>
</tr>
</tfoot>
<thead>
<tr>
<th>Vendor Location</th>
<th>Currency</th>
<th>Vendor Type</th>
<th>Vendor</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>
<span id="vendorLocation_1" class="vendorLocation">New York</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Steel</span>
</td>
<td>
<select id="vendorDropdown_1" class="vendorDropdown">
<option value="1" selected="selected">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="2">
<td>
<span id="vendorLocation_2" class="vendorLocation">Montreal</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Canadian</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Plastic</span>
</td>
<td>
<select id="vendorDropdown_2" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2" selected="selected">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="3">
<td>
<span id="vendorLocation_3" class="vendorLocation">Toronto</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Canadian</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Logistics</span>
</td>
<td>
<select id="vendorDropdown_3" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4">Vendor Name 4</option>
<option value="5" selected="selected">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="4">
<td>
<span id="vendorLocation_4" class="vendorLocation">Los Angeles</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Lumber</span>
</td>
<td>
<select id="vendorDropdown_4" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4" selected="selected">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
<tr id="5">
<td>
<span id="vendorLocation_5" class="vendorLocation">Seattle</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">American</span>
</td>
<td>
<span id="vendorCurrency_1" class="vendorCurrency">Services</span>
</td>
<td>
<select id="vendorDropdown_5" class="vendorDropdown">
<option value="1">Vendor Name 1</option>
<option value="2">Vendor Name 2</option>
<option value="3">Vendor Name 3</option>
<option value="4" selected="selected">Vendor Name 4</option>
<option value="5">Vendor Name 5</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
<!-- CSS -->
#vendorListing_wrapper {
width: 800px;
}
#vendorListing_filter {
display: none;
}
.odd {
background: #dddddd !important;
}
.even {
background: #ffffff;
}
<!-- jQuery -->
var vendorTable = "";
$(function() {
$('#vendorListing tfoot th.searchBox').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" id="search_' + title.replace(" ", "") + '" />');
});
vendorTable = $("#vendorListing").DataTable();
vendorTable.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
正如您从上面的代码中看到的，您可以单独搜索每一列。我遇到的问题是仅搜索带有下拉列表的列中选定的选项。例如，当我搜索 Name 1 时，我应该只获取 New York 行，但我获取了所有行，因为 Name 1 仍然存在于所有下拉列表中，只是未被选中。
有人知道如何过滤搜索功能，以便仅显示选定的项目作为结果吗？
https://jsfiddle.net/wbfsLx2x/2/
谢谢!
最佳答案
检查这个jsfiddle 。您需要做的是覆盖默认搜索。
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex, rowData, counter) {
var search_VendorLocationText = $('#search_VendorLocation').val();
var search_CurrencyText = $('#search_Currency').val();
var search_VendorTypeText = $('#search_VendorType').val();
var search_VendorText = $('#search_Vendor').val();
var textFound = true;
if(search_VendorLocationText.length){
var pattern = new RegExp(search_VendorLocationText, 'i');
if(pattern.test(data[0])){
textFound = true;
}else{
textFound = false;
}
}
if(search_CurrencyText.length){
var pattern = new RegExp(search_CurrencyText, 'i');
if(pattern.test(data[1])){
textFound = true;
}else{
textFound = false;
}
}
if(search_VendorTypeText.length){
var pattern = new RegExp(search_VendorTypeText, 'i');
if(pattern.test(data[2])){
textFound = true;
}else{
textFound = false;
}
}
if (search_VendorText.length) {
var pattern = new RegExp(search_VendorText, 'i');
if (pattern.test($(rowData[3]).children("option:selected").html())) {
textFound = true;
}else{
textFound = false;
}
}
return textFound;
}
);
希望这是您所需要的。
问候，尤
关于jQuery DataTable - 搜索一列下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46058661/
24
4
0
该插件的绝大多数文档表明您可以使用 对其进行初始化 $('#example').dataTable(); 但是http://www.datatables.net/examples/api/multi_
我有一个 SQL 查询，它获取一些数据(dbtable 表中的语言列)。查询使用 GROUP_CONCAT，因此一个单元格有多个结果，例如 "Ajax, jQuery, HTML, CSS". 我想要
我有一个由 jQuery DataTables 增强的动态表，它显示一个与此类似的自定义对象 example . JSON: { "data": [ { "name": "Ti
我有两个数据表。首先是 DataTable NameAddressPhones = new DataTable(); 具有三列姓名、地址和电话号码。但我只想要两列姓名和地址数据，所以我想将这些列(包含
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间？如果我有一张长 table ，它会隐藏在页面之外，因为它的默认位置在中间。 $('#example').dataTab
当我们向 DataTables 添加自定义过滤器时: $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { ..
我可以更改 dataTables 中搜索文本字段的宽度吗？ 我现在正在编写以下代码，但它不起作用。 $('#example').dataTable() .columnFilter(
使用 DataTables plugin 时 如何使分页和 Showing 1 to 8 of 8 entries 出现在顶部而不是底部？ 谢谢 最佳答案 每个数据表控件都以唯一的 id 命名计划之后
Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0 我看到这个问题被问了很多次，但没有回答。 关注这些后instructions to install angu
当单击外部按钮时，我正在尝试使用 DataTable(新版本)修改单元格值。我现在有以下内容: $(document).on('click', '.dropdown-menu li a', funct
引用:http://datatables.net/reference/api/page.info() 我正在尝试获取 ajax POST 生成的 jQuery DataTable 的当前分页信息。 使
以下对我有用: $('#datatable').on('page.dt', function() { alert("changed"); }); 每当我更改页面时，都会显示警报。但是如果我想警
我有一个 HTML 表，我在其中应用了 DataTables 函数。我使用表的第一行并将"template"类应用为我的模板行。然后选择此格式并使用 JSON feed 填充表中的所有行。问题是 Da
我有一个由 DataTables 1.10 驱动的表。过滤已打开。当我在下面谈论“做搜索”时，我指的是使用该表的过滤功能。 问题描述 关闭 stateSave 一切正常。但是，当 stateSave
看看这个例子，http://www.datatables.net/examples/api/multi_filter_select.html ，它使用 DataTable API 中的 columns
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中创建一个报表页面来呈现报表。 通过 Jackson 消息转换器解析后，服务器返回以下对象。 { "data"
我在刷新 Primesfaces 的延迟加载数据表时遇到了一些问题。我正在使用 3.0.M4。 使用过滤器在您的示例中使用三个类。还尝试了仅使用延迟加载的示例，但随后未在 Controller 中重新
在 Blue Prism (BP) 中，有一种叫做 Collection 的东西，它基本上是 C# 中的 DataTable。在 BP 中，您可以在集合中拥有集合。我的问题是，您可以在 C# 的 Da
我正在使用 Flutter DataTables 来显示购物车中的商品列表。现在我想编辑任何选定行的数量。有没有办法获取用户点击的行信息？ 以下是我的DataTable的完整代码: class _Da
我有一个关于 primefaces 数据表组件的问题。我想将 DataTable 变量绑定(bind)到 p:dataTable，以便我能够从支持 bean 以编程方式操作第一个、行、rowsPerP
我是一名优秀的程序员,十分优秀！