2016-06-15 5 views
0

Я использую данные для отображения некоторых данных. И я обновляю строки, используя table.ajax.reload.Выделите строку данных при изменении данных

Что бы я хотел сделать, это выделить строки, которые меняются. выделите зеленый цвет, когда последний столбец поднимается вверх. и выделите красный цвет, когда последний столбец опустится.

Содержит ли эти данные api для этого?

<table id="example1" class="display" cellspacing="0" width="100%"> 
<thead> 
     <tr><th>Coin</th><th>last</th><th>lowestAsk</th><th>highestBid</th><th>percentChange</th><th>baseVolume</th><th>quoteVolume</th><th>isFrozen</th><th>high24hr</th><th>low24hr</th></tr> 
    </thead> 
    <tbody></tbody> 
    <tfoot> 
     <tr><th>Coin</th><th>last</th><th>lowestAsk</th><th>highestBid</th><th>percentChange</th><th>baseVolume</th><th>quoteVolume</th><th>isFrozen</th><th>high24hr</th><th>low24hr</th></tr> 
    </tfoot> 
</table> 


$(document).ready(function() { 
var uriToken = '/dfeed.php'; 
var table = $('#example1').DataTable({ 
    //"processing": true, 
    //"serverSide": true, 
    //"searching": true, 
    "ajax": uriToken + '?get_ticker2=1', 
    "columns": [ 
     { "data": "Coin" }, 
     { "data": "last" }, 
     { "data": "lowestAsk" }, 
     { "data": "highestBid" }, 
     { "data": "percentChange" }, 
     { "data": "baseVolume" }, 
     { "data": "quoteVolume" }, 
     { "data": "isFrozen" }, 
     { "data": "high24hr" }, 
     { "data": "low24hr" } 
     ] 
}); 



window.setInterval(function() { 
    table.ajax.reload(null, false); // user paging is not reset on reload 
    //console.log("tick"); 
}, 3000 }); 
+0

вы должны использовать перегрузочный обратный вызов, чтобы сравнить свой 2 набора данных –

+0

круто. как мы это делаем? – Prescient

ответ

0

Datatable не атрибут любой id или class всем его <td>.

Таким образом, вы могли бы попытаться обернуть обновленные значения с span ...
Что-то вроде: <span class="updatedValue">Your value</span>.

Затем с помощью JQuery, сразу после перезагрузки:

$(".updatedValue").parent().css({"background-color":"#10E438"}); // Or any other green color number ;) 
Смежные вопросы