Change cell backgrondColor with ajax

Change cell backgrondColor with ajax

agg9505agg9505 Posts: 11Questions: 5Answers: 0

I want to do this something like this

$(document).ready( function () {
  var table = $('#example').DataTable({
    "createdRow": function( row, data, dataIndex ) {
             if ( data[2] == "London" ) {        
         $(row).addClass('red');
       }
    }
  });
} );

example : http://live.datatables.net/tohehohe/1/edit
but in this example the table is all ready in HTML how can y do this if I send the info in ajax?

MyCode:

 $('#InventarioDataTable').dataTable({
            "order": [[2, "asc"]],
            ajax: "Inventario/GetList",
            columns: [
                {
                    data: "Ingrediente1",
                    render: function (data, type, row) {

                        return row.Ingrediente1+'  <input  type="hidden" id="Id" name="Id" value="' + row.Id + '">';// ('<input type="checkbox" class="editor-active" value="true" ' + checked + ' disabled>');

                    }
                },
                { "data": "Tipo" },
                { "data": "Prefijo" },
                {
                    "data": "CantidadMinima"
                },
                {
                    data: "Cantidad",
                    //try
                    render: function (data, type, row) {
                        if (row.Cantidad >= row.CantidadMinima + (row.CantidadIdeal - row.CantidadMinima) / 2) {
                            $('td', row).eq(4).css('background', 'green');
                        }
                        if (row.Cantidad< row.CantidadMinima + (row.CantidadIdeal - row.CantidadMinima) / 2) {
                            $('td', row).eq(4).css('background', 'orange');
                        }
                        if (row.Cantidad <= row.CantidadMinima) {
                            $('td', row).eq(4).css('background', 'red');
                        }
                        return row.Cantidad;
                    }
                },
                { "data": "MichoacanaId" }
            ]
        });~

Answers

  • kthorngrenkthorngren Posts: 20,628Questions: 26Answers: 4,831

    I think the createdRow is the recommended way to do this. Since you are using objects, not arrays, for your data you would do something like this:

        "createdRow": function( row, data, dataIndex ) {
                 if ( data.Cantidad == "London" ) {       
             $(row).addClass('red');
           }
        }
    

    You would refer to the data object's properties.

    Kevin

This discussion has been closed.