如何在jQuery Datatable中查找数值

huangapple go评论54阅读模式
英文:

How to find a value in a jQuery Datatable

问题

我正在尝试在数据表的第一列中查找一个数值,并且在找到该数值时将行着色。

我尝试了这个:

$.each(table.column(0), function(key, value){
  if(value==="value"){
    table.row(0).css('background-color', 'red');
  }
})

然后尝试了这个:

for(var i = 0; i < table.row(0).length; i++){
  if(table.column(0).item(i).data() === "value"){
    table.row(i).css('background-color', 'red');   
  }
}

但都没有成功。

英文:

I am trying to find a value in the first column on a datatable, and colored the row when this value is found.

I tried this :

$.each(table.column(0), function(key, value){
  if(value===&quot;value&quot;){
    table.row(0).css(&#39;background-color&#39;, &#39;red&#39;);
  }
})

then this:

for(var i =0; i&lt;table.row(0).length; i++){
  if(table.column(0).item(i).data() === &quot;value&quot;){
    table.row(i).css(&#39;background-color&#39;, &#39;red&#39;);   
  }
}

But nothing worked.

答案1

得分: 0

You can loop inside your datatable after bind using YourTable.rows().every(function(rowIdx, tableLoop, rowLoop){ and add desire class whatever needed.

Example:

var YourTable = $('#table').DataTable({}); // 先绑定你的表格。

YourTable.rows().every(function(rowIdx, tableLoop, rowLoop){
    var rowData = this.data();
    if(rowData.value == "value"){
        $(this.node()).addClass('YourClass');
    }
});

On CSS:

.YourClass{
  background-color: red;
}

Note: 不要混淆 rowData.value,它是字段名称,就像 first nameEmail 等一样。

英文:

You can loop inside your datatable after bind using YourTable.rows().every(function(rowIdx, tableLoop, rowLoop){ and add desire class whatever needed.

Example:

var YourTable = $(&#39;#table&#39;).DataTable({}); // Bind your table first.

YourTable .rows().every(function(rowIdx, tableLoop, rowLoop){
         var rowData = this.data();
         if(rowData.value  == &quot;value&quot;){
            $(this.node()).addClass(&#39;YourClass&#39;);
        }
});

On CSS:

.YourClass{
  background-color: red
}

Note: Dont confuse with rowData.value, its field name just like first name, Email .........

huangapple
  • 本文由 发表于 2023年2月8日 23:21:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/75387942.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定