Javascript 在具有列优先级的数据表中搜索
我正在尝试使用DataTables进行搜索,一切都很好,但我有一个无法解决的问题。假设我有一张这样的桌子:Javascript 在具有列优先级的数据表中搜索,javascript,jquery,datatables,Javascript,Jquery,Datatables,我正在尝试使用DataTables进行搜索,一切都很好,但我有一个无法解决的问题。假设我有一张这样的桌子: NAME | TAGS ---------------- Tom | qwe, mark Mark | dfg, uio 当我搜索“mark”时,顺序仍如上图所示,但我想以某种方式赋予NAME列更高的优先级,因此当我搜索“mark”时,顺序将颠倒: NAME | TAGS ---------------- Mark | dfg, uio Tom | qwe, mark 有没
NAME | TAGS
----------------
Tom | qwe, mark
Mark | dfg, uio
当我搜索“mark”时,顺序仍如上图所示,但我想以某种方式赋予NAME列更高的优先级,因此当我搜索“mark”时,顺序将颠倒:
NAME | TAGS
----------------
Mark | dfg, uio
Tom | qwe, mark
有没有办法将搜索优先级设置为列?谢谢。不,无法直接从数据表(客户端)执行此操作。我曾尝试使用自定义筛选算法,但无法使其工作 我能想到的唯一方法是让datatables服务器端进行处理,并从服务器返回经过筛选和排序的数据(按优先级)。但这也意味着我必须在服务器端管理每个datatables事件(排序、筛选、分页…),这可能并不理想
如果您想尝试一下,请查看。以下是我的解决方案,其中包含一个隐藏列:
$(function () {
let i = 0;
let table_selector = "#myTableId";
let input_unique_id = "datatables_helper_id";
let hidden_col_index = document.querySelector(table_selector + " thead tr").childElementCount;
$(table_selector)
.find("tr")
.each(function () {
let trow = $(this);
trow.append("<td>" + i + "</td>");
i += 1;
});
let table = $(table_selector).DataTable({
pageLength: 10,
columnDefs: [
{
targets: [hidden_col_index],
visible: false,
searchable: false,
},
],
});
$(table_selector + "_filter label input").on("focus", function () {
this.setAttribute("id", input_unique_id);
});
$("body").on("keyup", "#" + input_unique_id, function () {
table.rows({ search: "applied" }).every(function () {
if (this.data()[0].startsWith(table.search())) {
let data = this.data();
data[hidden_col_index] = 1;
this.data(data);
} else {
let data = this.data();
data[hidden_col_index] = 2;
this.data(data);
}
});
table.order([[hidden_col_index, "asc"]]).draw();
});
});
$(函数(){
设i=0;
让table_选择器=“#myTableId”;
让输入\u unique\u id=“datatables\u helper\u id”;
让hidden_col_index=document.querySelector(表选择器+“thead tr”).childElementCount;
$(表\选择器)
.find(“tr”)
.每个(功能){
设trow=$(这个);
追加(“+i+”);
i+=1;
});
let table=$(table\u选择器).DataTable({
页长:10,
columnDefs:[
{
目标:[隐藏列索引],
可见:假,
可搜索:false,
},
],
});
$(表_选择器+“_过滤器标签输入”)。打开(“焦点”,函数(){
此.setAttribute(“id”,输入唯一的id);
});
$(“body”)。在(“键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键控键{
table.rows({search:“applied”}).every(函数(){
if(this.data()[0].startsWith(table.search())){
设data=this.data();
数据[隐藏列索引]=1;
这.数据(数据),;
}否则{
设data=this.data();
数据[隐藏列索引]=2;
这.数据(数据),;
}
});
table.order([[hidden_col_index,“asc”]]).draw();
});
});