Using Progressbar and multiple DataTable at full potential

poutchyouk

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

[code].pbar .ui-progressbar-value {
background: red;
}[/code]

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

[code]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 '';
}
}
]
});
}
// 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:
//

poutchyouk

sorry for my bad english...

psharp

Your English is fine.

We have something similar to your second problem that has been solved (at least if I understand what you are asking).

Instead of trying to "lock" a row of the datatable, thus preventing it from being removed after a page change or reload, instead try the following idea.

When a row is "selected" by the user, by clicking or whatever, copy that row to another datatable. You can use the fnAddData method of the second table. Here is an example of its usage:
http://www.datatables.net/examples/api/add_row.html

Basically set up a "selection list" table and populate that with the selected records from the first table.

Not exactly what you were looking for, but an elegant solution for our needs.

poutchyouk

I'm more trying to do like the live event example: http://www.datatables.net/release-datatables/examples/advanced_init/events_live.html

the problem is that it seems that the reload of the datatable and the progressbars break the catching of the event.

I tried to put the following line afer the first init, before and after the progressbar update but it doesn't work
[code]$("#TopTable tbody tr").live('click', function() { alert("Hello"); })[/code]

once it works I will add code to save the id of the selected line and then use it to accordingly update a second datatable.

allan

Are you able to link to the page you are working on please?

Allan

poutchyouk

Sorry, I can't. It is hosted on the intranet of my company.
But i can give you a link to download my project in a shortened version. http://www.envoyercefichier.com/files/dg7wgTm1369986147.html

I managed to do what i wanted with the click on the table. Now what is left is changing the color of the progressbars. (Note: the click is not included in this version)