Изменить фон строки в drawCallback DataTables

Как изменить фон строки, которая имеет определенное значение в ячейке внутри drawCallback?Изменить фон строки в drawCallback DataTables

$(table_id).DataTable({ 
    //... 
    "drawCallback": function (settings) { 
      // here for each row, if row['type'] != "" then row.bgcolor ="yellow" 
     },

Это полный фрагмент кода, который делают мою таблицу:

$(table_id).DataTable({ 
     "order": [[0, "desc"]], 
     serverSide: true, 
     "processing": true, 
     rowId: 'MessageID', 
     ajax: { 
      url: '/Controller/myRoute', 
      type: 'POST', 
      data: {table_id: table_id}, 
     }, 
     "initComplete": function(settings, json) { 

     }, 
     "createdRow": function (row, data, index) { 
      console.log("data is" + data); 
     }, 
     columns: [ 
      { 
       data: "Date", 
       "sortable": true, 
       "render": function (data) { 
        var formatted = data; 
        if (data.indexOf("/Date(") !== -1) { 
         var date = new Date(parseInt(data.replace("/Date(", "").replace(")/", ""), 10)); 
         formatted = date.toString('dd/MM/yyyy HH:mm:ss'); 
        } 
        return formatted; 
       } 
      }, 
      { data: "Message_id"}, 
      { data: "From_id"}, 
      { data: "Message_text" }, 
     ] 
    }); 
    } 
});

Внутри/Controller/MyRoute У меня есть код, который извлекает 10 объекта из БД и возвращать их как JSON.

источник

2016-10-13 DaviJones

Я использую следующее решение на другой функции обратного вызова:

JavaScript:

"createdRow": function (row, data, index) { 
      if (data.type !== '') { 
       $(row).addClass('colored-row'); 
      } 
     }

А потом в моду с CSS:

.colored-row{background-color:yellow;}

источник

2016-10-13 08:59:36

Благодаря Самуила, но я должен это сделать в этой конкретной функции обратного вызова ... – DaviJones

Использование createdRow обратного вызова:

$(document).ready(function() { 
 
    $('#example').dataTable({"sPaginationType": "full_numbers", 
 
    "createdRow": function (tr, tdsContent) { 
 
      if(tdsContent[4] === 'A') { 
 
      \t tr.style.backgroundColor = 'red'; 
 
      } 
 
     }}); 
 
});


 
<html> <head> <title>Row color</title> 
 
     
 
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 

 
     <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> 
 
     <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
     
 
     
 
    </head> 
 

 
    <body> 
 
      
 
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example"> 
 
    <thead> 
 
     <tr> 
 
      <th>Rendering engine</th> 
 
      <th>Browser</th> 
 
      <th>Platform(s)</th> 
 
      <th>Engine version</th> 
 
      <th>CSS grade</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Trident</td> 
 
      <td>Internet 
 
       Explorer 4.0</td> 
 
      <td>Win 95+</td> 
 
      <td> 4</td> 
 
      <td>X</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Trident</td> 
 
      <td>Internet 
 
       Explorer 5.0</td> 
 
      <td>Win 95+</td> 
 
      <td>5</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Trident</td> 
 
      <td>Internet 
 
       Explorer 5.5</td> 
 
      <td>Win 95+</td> 
 
      <td>5.5</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Trident</td> 
 
      <td>Internet 
 
       Explorer 6</td> 
 
      <td>Win 98+</td> 
 
      <td>6</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 7.0</td> 
 
      <td>Win 95+/OSX.1+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 7.5</td> 
 
      <td>Win 95+/OSX.2+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 8.0</td> 
 
      <td>Win 95+/OSX.2+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 8.5</td> 
 
      <td>Win 95+/OSX.2+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 9.0</td> 
 
      <td>Win 95+/OSX.3+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 9.2</td> 
 
      <td>Win 88+/OSX.3+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera 9.5</td> 
 
      <td>Win 88+/OSX.3+</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Opera for Wii</td> 
 
      <td>Wii</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Nokia N800</td> 
 
      <td>N800</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Presto</td> 
 
      <td>Nintendo DS browser</td> 
 
      <td>Nintendo DS</td> 
 
      <td>8.5</td> 
 
      <td>C/A<sup>1</sup></td> 
 
     </tr> 
 
     <tr> 
 
      <td>KHTML</td> 
 
      <td>Konqureror 3.1</td> 
 
      <td>KDE 3.1</td> 
 
      <td>3.1</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>KHTML</td> 
 
      <td>Konqureror 3.3</td> 
 
      <td>KDE 3.3</td> 
 
      <td>3.3</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>KHTML</td> 
 
      <td>Konqureror 3.5</td> 
 
      <td>KDE 3.5</td> 
 
      <td>3.5</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Tasman</td> 
 
      <td>Internet Explorer 4.5</td> 
 
      <td>Mac OS 8-9</td> 
 
      <td>-</td> 
 
      <td>X</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Tasman</td> 
 
      <td>Internet Explorer 5.1</td> 
 
      <td>Mac OS 7.6-9</td> 
 
      <td>1</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Tasman</td> 
 
      <td>Internet Explorer 5.2</td> 
 
      <td>Mac OS 8-X</td> 
 
      <td>1</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>NetFront 3.1</td> 
 
      <td>Embedded devices</td> 
 
      <td>-</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>NetFront 3.4</td> 
 
      <td>Embedded devices</td> 
 
      <td>-</td> 
 
      <td>A</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>Dillo 0.8</td> 
 
      <td>Embedded devices</td> 
 
      <td>-</td> 
 
      <td>X</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>Links</td> 
 
      <td>Text only</td> 
 
      <td>-</td> 
 
      <td>X</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>Lynx</td> 
 
      <td>Text only</td> 
 
      <td>-</td> 
 
      <td>X</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>IE Mobile</td> 
 
      <td>Windows Mobile 6</td> 
 
      <td>-</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Misc</td> 
 
      <td>PSP browser</td> 
 
      <td>PSP</td> 
 
      <td>-</td> 
 
      <td>C</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Other browsers</td> 
 
      <td>All others</td> 
 
      <td>-</td> 
 
      <td>-</td> 
 
      <td>U</td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
      
 
</body></html>

источник

2016-10-13 09:10:16

Эй Гудзь, я должен сделать это внутри drawCallback так ServerSide мои DataTable получает данные с помощью Ajax, каждый раз, когда новая строка добавляется Я запускаю ajax.reload в таблице, и вызванный обратный вызов returnRow вызывается для всех строк, которые я извлекаю, и это не то поведение, которое я пытаюсь выполнить ... Мне нужно что-то, что выполняется после того, как таблица нарисована в порядке для выделения строк с определенными значениями ... – DaviJones

можете ли вы предоставить фрагмент кода с помощью вашего примера ajax? Я уверен, что есть способ использовать обратный вызов 'createdRow', перемещая ваш вызов ajax в другое место или что-то вроде этого –

Изменить фон строки в drawCallback DataTables

ответ

Смежные вопросы