gpt4 book ai didi

javascript - DataTables:获取匹配单列条件的整行的源数据

转载 作者:行者123 更新时间:2023-12-01 06:09:50 26 4
gpt4 key购买 nike

如何获取用户在数据表中输入过滤器的列的整行数据?用户将输入过滤器,我希望系统在不更改表的行数据的情况下搜索它。

我试过这个

var rowData = $('#table').DataTable().column(2).data().filter(function(value,index){
return value == $('input[name=filter]').val() ? true:false;
}).toArray();

但这只会获取列(2) 值(如果存在)。我想获取该行中的所有数据。我只搜索列(2),但我想获取所有列数据或过滤结果所在的行。

我已经尝试过了

var rowData = $('#table').DataTable().column(2).search($('input[name=filter]').val()).row({search: 'applied'}).data();

但这会改变 UI 表,这是我不希望发生的。我只需要整行的数据。

最佳答案

如果您不需要触发 DataTables 功能(例如过滤或选择),您可以简单地检索整个表的源数据集并按您感兴趣的列进行过滤(假设您已将 datatables 对象分配给变量 dataTable 并且您希望通过源对象属性 item 过滤数据:

const matchingRows = dataTable
.data()
.toArray()
.filter(row => row.item.toLowerCase().includes($('#searchbar').val().toLowerCase()));
console.log(matchingRows);

您可能会在下面找到完整的演示:

//source data
const srcData = [
{id: 1, item: 'apple', cat: 'fruit'},
{id: 2, item: 'carrot', cat: 'vegie'},
{id: 3, item: 'strawberry', cat: 'berry'}
];

//datatables initialization
const dataTable = $('table').DataTable({
dom: 't',
data: srcData,
columns: ['id', 'item', 'cat'].map(header => ({title: header, data: header}))
});

//search handler
$('#logrow').on('click', () => {
//retrieve source dataset and filter by
//column of interrest includes search
//string (case insensitive)
const matchingRows = dataTable
.data()
.toArray()
.filter(row => row.item.toLowerCase().includes($('#searchbar').val().toLowerCase()));
console.log(matchingRows);
});
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<label>Search for Item</label>
<input id="searchbar"></input>
<button id="logrow">Log row data</button>
<table></table>
</body>
</html>

关于javascript - DataTables:获取匹配单列条件的整行的源数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56899292/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com