我在 html 页面上有数据表。在我的数据表中,我在页脚有按列搜索。此搜索适用于所有列,但一列具有选择选项元素(下拉列表),因此它不起作用。每次当它开始搜索而不是列表中选定的值时,它都会搜索所有列表值。
工资栏的列表值包含:- 适配器、Adater1、电容器、二极管 但在这里,当我尝试搜索时,它不会搜索选定的值,而是在整个列表中搜索每一行,这就是为什么当我输入 Adapter1 时,它无法隔离,因为每行都将 Adapter1 作为值。理想情况下,它应该只显示一行,但这是我的输出:-
但是当我输入列表中不存在的任何值时,它会正确显示,因此搜索正在工作,但它采用所有值而不是所选值:-
你能帮我解决这个问题吗?
下面是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootStrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.4/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.2/css/dataTables.dateTime.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<!-- <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" /> -->
<!-- https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css -->
</head>
<body>
<div class="container mb-3 mt-3">
<div class="panel panel-default">
<div class="panel-heading"><b> Demo </b> </div>
<div class="panel-body">
<div class="tbl_user_data"><table class="table table-striped table-bordered" id = "mydatatable"
>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr row_id = "123">
<td></td>
<td><div class="row_data" edit_type="click" col_name="fname">Tiger Nixon</div></td>
<td><div class="row_data" edit_type="click" col_name="pos">Developer</div></td>
<td><div class="row_data" edit_type="click" col_name="off">Edinburgh</div></td>
<td><div class="row_data" edit_type="click" col_name="age">61</div></td>
<td><div class="row_data" edit_type="click" col_name="startdate">2011/04/25</div></td>
<td><div class="row_data" edit_type="lov" col_name="sal">
<select class="example-dropUp" id="selhw">
<option >Adapter</option>
<option selected>Adapter1</option>
<option >Capacitor</option>
<option >Diode</option>
</select>
</div></td>
</tr>
<tr row_id = "124">
<td></td>
<td><div class="row_data" edit_type="click" col_name="fname">Tiger Nixon1</div></td>
<td><div class="row_data" edit_type="click" col_name="pos">System Architect1</div></td>
<td><div class="row_data" edit_type="click" col_name="off">Edinburgh1</div></td>
<td><div class="row_data" edit_type="click" col_name="age">611</div></td>
<td><div class="row_data" edit_type="click" col_name="startdate">2011/04/25</div></td>
<td><div class="row_data" edit_type="lov" col_name="sal">
<select class="example-dropUp" id="selhw">
<option >Adapter</option>
<option >Adapter1</option>
<option selected>Capacitor</option>
<option >Diode</option>
</select>
</div></td>
</tr>
<tr row_id = "125">
<td></td>
<td><div class="row_data" edit_type="click" col_name="fname">Tiger Nixon2</div></td>
<td><div class="row_data" edit_type="click" col_name="pos">System Architect2</div></td>
<td><div class="row_data" edit_type="click" col_name="off">Edinburgh2</div></td>
<td><div class="row_data" edit_type="click" col_name="age">61</div></td>
<td><div class="row_data" edit_type="click" col_name="startdate">2011/04/25</div></td>
<td><div class="row_data" edit_type="lov" col_name="sal">
<select class="example-dropUp" id="selhw">
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</div></td>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><b>HTML Table Edits/Upates</b> </div>
<div class="panel-body">
<p>All the changes will be displayed below</p>
<div class="post_msg"> </div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/esm/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://cdn.datatables.net/datetime/1.1.2/js/dataTables.dateTime.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<!-- <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script> -->
<script type="text/javascript">
$(document).ready(function($)
{
$('#mydatatable tfoot th').each( function (index) {
//alert("in Tfoot");
console.log("tfoot th");
var title = $(this).text();
var notapplyFilteronColumn =[0]
if(notapplyFilteronColumn.indexOf(index) < 0 )
{
$(this).html( '<input type="text" id="txtName'+index+'" placeholder="Search '+title+'" data-index="'+index+'" />' );
}
} );
var table = $('#mydatatable').DataTable({
order:[[3,'desc']],
// processing: true,
pagingType:'full_numbers',
pageLength:20,
scrollY:500,
scrollX:true,
searchable: true,
// bFilter: false,
lengthMenu:[[5,10,25,50,-1],[5,10,25,50,"All"]],
select: {
style: 'multi'
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0,
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
search:
{
caseInsensitive: true,
smart: true
},
order: [[ 1, 'asc' ]],
initComplete: function () {
// Apply the search
console.log("Inside initcomplete");
this.api().columns().every( function (index) {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
console.log("inside Keyup change");
console.log("index = "+index);
if ( that.search() !== this.value ) {
that
.search(this.value)
.draw();
}
} );
} );
} //initcomplete
}); //dt
});
</script>
</body>
</html>
search(...)
API 调用时,您只能搜索每列中的所有内容。就您而言,这有两个问题:
(1) 每个包含选择列表的单元格实际上包含
<select>...</select>
元素的完整 HTML 文本 - 包括选择使用的所有选项。这就是搜索似乎不起作用的原因。事实上,它工作正常。它总是会找到每个选择选项,无论它是否是 selected 选项。
(2) 用户可以随时选择任何选择选项 - 并且所有此类更改仅在 DOM 中捕获。底层 DataTable(即 JavaScript 对象)对此类更改一无所知。因此,没有直接的方法来告诉 DataTables
search()
函数此类更改。
解决方案
一种解决方案是使用
$.fn.dataTable.ext.search
创建自定义 DataTables 搜索功能。您可以在此处查看一个基本示例。
下面是基于您问题中代码的简化版本的可运行片段,展示了如何调整
$.fn.dataTable.ext.search
来处理包含选择列表的列:
// remove the default global filter function:
while($.fn.dataTable.ext.search.length > 0) {
$.fn.dataTable.ext.search.pop();
}
// add our custom filter function:
$.fn.dataTable.ext.search.push(
function( settings, data, rowIdx ) {
// get the TD node containing the drop-down list:
var selectListTdNode = $('#example').DataTable().rows(rowIdx).nodes().to$().find( 'td' )[5]
// get the selected value:
var selection = $( selectListTdNode ).find(":selected").text();
// process each field in the row:
var displayRow = true; // start by assuming the row should be displayed
data.forEach(function (item, idx) {
// for the 6th column (idx = 5), we need to use the selected drop-down
// value, and not the contents of the cell:
item = (idx === 5) ? selection : item;
var searchField = $('#example').DataTable().columns(idx).footer();
var searchValue = $(searchField).find( 'input' ).val();
// should the row be displayed? 'false' means 'do not display':
if (searchValue !== '' & !item.toLowerCase().includes(searchValue.toLowerCase())) {
displayRow = false;
}
});
return displayRow;
}
);
$(document).ready(function() {
// create an input field in each footer cell:
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var table = $('#example').DataTable({
dom: 'lrtip' // hide the global filter box ('f')
});
// create change events to trigger a re-draw, which also calls the filter function:
$('#example tfoot th input').keyup( function() {
table.draw();
} );
$('#example td select').change( function() {
table.draw();
} );
} );
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option >Capacitor</option>
<option selected>Diode</option>
</select>
</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>
<select>
<option >Adapter</option>
<option >Adapter1</option>
<option selected >Capacitor</option>
<option>Diode</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
解释
我在代码中添加了注释来解释详细步骤,但总的来说,其工作原理如下:
首先,我们删除默认搜索功能(全局搜索框使用此功能) - 我们还使用 DataTables
dom
选项隐藏全局搜索框本身。
然后我们定义替换搜索函数。
此函数需要访问 DOM,以提取每个选择列表的所有选定值 - 这就是
find(":selected").text()
的作用。
(我们只需要表中的最后一列,因此所有其他列都可以只使用它们的单元格内容,而不需要这个额外的步骤。)
每次执行
draw()
时都会触发搜索功能。当它触发时,它会针对表中的每个单独行执行,并确定是否应显示或隐藏每行。它通过将每个字段的值与列的搜索词进行比较,返回 true
或 false
值来实现此目的。
如果any搜索词无法匹配相关字段的数据,则该行将被隐藏。这就是我们确保所有列过滤器指令相互结合评估的方式。该解决方案使用
displayRow
布尔值来跟踪每行的总体“可显示”状态。
最后,在脚本的末尾,我们需要创建事件处理程序,这将强制重新绘制数据表,并且还会导致再次调用我们的自定义过滤器函数。请注意,我们不仅为页脚中的输入字段创建这些事件处理程序,还为每个选择列表创建这些事件处理程序 - 因为用户可以更改选择列表值,并且过滤需要立即考虑此类更改。
最后注意事项
使用 DataTables,完成一项任务通常有不止一种方法。但在这种情况下,我绝对建议使用自定义函数,以获得最大的灵活性。
我找到了如下解决方案。我将文本框中输入的值分配给一个变量并从那里读取它。
您仍然需要调用 search() 函数才能使表搜索功能起作用。
let customTable = $("#datatable").DataTable({
dom: "'<'row''<'col-12'>><'row''<'col-xs-12 col-md-12 survey-export'><'col-md-6 col-xs-12 dt-buttons clearfix'B><'col-md-6 col-xs-12 dataTables_length'l>><'row'<'col-xs-12'f>r>t<'row'<'col-xs-12'p i>>",
ajax: function (data, callback, settings) {
var api = new $.fn.dataTable.Api(settings); // <--- create new api object using settings object
var dataGroup = {
currentPage: api.page() !== 0 ? api.page() : 1,
size: api.page.len(),
searchParam: api.search() !== '' ? api.search() : searchParam
}
$.ajax({
type: 'GET',
url: url,
data: dataGroup,
success: function (response) {
if (response.isSuccess) {
var totalRecords = response.data.recordsTotal; // Toplam kayıt sayısı
var pageCount = response.data.recordsFiltered; // Toplam kayıt sayısı
var recordsPerPage = 50; // Sayfa başına gösterilecek maksimum kayıt sayısı
callback({
data: response.data.data,
recordsTotal: totalRecords,
recordsFiltered: totalRecords,
});
FuncyboxInit();
}
}
});
}
});
$('.survey-export').html('<input type="text" class="ant-input" placeholder="Ekipman Arama">');
$(".survey-export input").on('keyup change', function (e) {
debugger
if (e.keyCode == 13 || this.value == "") {
searchParam = this.value;
customTable.search(this.value).draw();
}
});