Estoy construyendo una tabla usando Datatables
recogiendo valores de una base de datos y me gustaría mostrar las filas que tienen unread=true
en la base de datos en texto negrita . No he encontrado una forma de recuperar ningún valor (es decir, columna no leído ) de la tabla usando Jquery / JS para aplicar una clase específica.
¿Se puede hacer esto de alguna manera? Este es mi código actual, que obviamente no soluciona el problema.
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
var table = $('table.table').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"dataSrc": "Data",
"url": "logsController/getDataTable",
"data": { string: $("input.form-control").val() },
"type": "POST"
},
"columns": [
{ "data": "datetime" },
{ "data": "type" },
{ "data": "data" }
]
} );
$('#myTableLogs').DataTable();
console.log(data.unread)
o console.log(data.datetime)
devuelven "los datos no están definidos"
ACTUALIZACIÓN: Resolví mi problema eliminando serverSide
y cambiando mi código. Ver la respuesta a continuación.
2 respuestas
Puede usar la opción de devolución de llamada createdRow para probar los datos de fila para un valor y agrega dinámicamente una clase a la fila
var table = $('table.table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"dataSrc": "Data",
"url": "logsController/getDataTable",
"data": { string: $("input.form-control").val() },
"type": "POST"
},
"columns": [
{ "data": "datetime" },
{ "data": "type" },
{ "data": "data" }
],
"createdRow": function(row, data) {
// replace with appropriate reference to your data structure
// and CSS class to change font weight
if (data.unread) $(row).addClass('text-bold');
}
});
Descubrí que serverSide no era necesario y me inspiré en esta página y utilizando createdRow.
$.ajax({
url: "logsController/getDataTable",
method: 'post',
dataType: 'json',
success: function (data) {
var table = $('#myTableLogs').DataTable({
paging: true,
sort: true,
searching: true,
data: data,
ordering: true,
columns: [
{ "data": "datetime" },
{ "data": "type" },
{ "data": "data" },
{ "data": "unread" }
],
"createdRow": function ( row, data, index ) {
if ( data.unread == 1 ) {
$('td', row).addClass('unread_class');
}
}
});
});
Nuevas preguntas
jquery
jQuery es una biblioteca de JavaScript, considere también agregar la etiqueta de JavaScript. jQuery es una popular biblioteca JavaScript entre navegadores que facilita el recorrido del Modelo de objetos de documento (DOM), el manejo de eventos, las animaciones y las interacciones AJAX al minimizar las discrepancias entre los navegadores. Una pregunta etiquetada jQuery debe estar relacionada con jQuery, por lo que jQuery debe ser utilizada por el código en cuestión y al menos los elementos relacionados con el uso de jQuery deben estar en la pregunta.