Using Progressbar and multiple DataTable at full potential

Hi there,

I'm just starting and I'll probably be posting more questions as my project advence.
I can't post a link to my page since it is hosted in an intranet. Screenshots will do the work well enought.
I'm working on a web site whith C# and MVC3.

Here is what my DataTable looks like right now http://img4.hostingpics.net/pics/643200Untitled.png (you will then notice that I am french ^^)

The problem is that I can't manage to change the color of the progressbars.

Here is an example about how to change the color of a single one progressbar http://jqueryui.com/progressbar/#indeterminate

I added this CSS property

.pbar .ui-progressbar-value {
   background: red;
}

Here is how I init and handle the reloading of the Table.

function InitTopDataTable() {
   var TopTable = $("#TopTable").dataTable({
      "oLanguage": // I change the text displayed here
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "bServeSide": true,
      "sAjaxSource": "Home/GetTopTable",
      "bProcessing": true,
      "aoColumns": [
               { "sName": "ID" },
               { "sName": "RAMENAME" },
               { "sName": "VISITNAME" },
               { "sName": "EQUIPE" },
               { "sName": "DATESTART" },
               { "sName": "PROGRESS",
                  "fnRender": function (oObj) {
                     return '<div class=\"progressbar' + oObj.aData[0] + ' pbar\" data-value=\"' + oObj.aData[5] + '\"><div class=\"progress-label' + oObj.aData[0] + ' plabel\"></div></div>';
                  }
               }
            ]
   });
}
// If you see any flaw in the init, please tell me.

// conserning the progressbas, each of them is differencied by his class name this way:
// <div class="progressbar1 pbar" ....
// <div class="progressbar2 pbar" ....
// <div class="progressbar3 pbar" ....
// ...

function RefreshTable(tableId, urlData) {
   $.getJSON(urlData, null, function (json) {
      table = $(tableId).dataTable();
      oSettings = table.fnSettings();
      table.fnClearTable(this);

      for (var i = 0; i < json.aaData.length; ++i) {
         table.oApi._fnAddData(oSettings, json.aaData[i]);
      }
      oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
      table.fnDraw();

//Reload progressbars HERE
      for (var i = 0; i < json.aaData.length; ++i) {
         var label = $(".progress-label" + json.aaData[i][0]);

         var bar = $(".progressbar" + json.aaData[i][0])
         var barValue = bar.find(".ui-progressbar-value");

         bar.progressbar({ value: parseInt(json.aaData[i][5]) });

         label.text(bar.progressbar("value") + "%");

         if (parseInt(json.aaData[i][5]) < 25) {
            barValue.css({ "backgroud": "black" });
         }
      }
   });
}

function AutoReload() {
   RefreshTable("#TopTable", "/Home/GetTopTable");
   setTimeout(function () { AutoReload(); }, 1000);
}
setTimeout(function () { AutoReload(); }, 1);

I don't thinks it's of any use for now to show you the code in my controller, yet.

If you could help me with that one problem i could move on to a more my next objective which is to select a row and keep it selected even after a reload.

Thanks in advence :)