HTML5 Progress Bars Below Footer of DataTable

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/9yqLfz07/59/

Hello, so I came across this post here: https://datatables.net/forums/discussion/comment/150173/#Comment_150173

And I had a couple of questions relating to the html5 progress bar. I see that it can be applied to a column within the table, but can it be applied to column data that is used as the rowGroup data source? For example in my test:

rowGroup: {
                dataSrc: [
                    'Department'
                ],

I want to display the variable I created based off of some AJAX data "greenTotPerc" for each department in a progress bar on the collapsible row.

kthorngren

You can use the HTML progress anywhere you like. Here is another example using it.

Kevin

zgoforth

Does it have to be initialized in the columns init? The variable that I want to use is defined in my rows.every function which is nested within my startRender function. So unfortunately I cannot call it if it has yet to be initialized

kthorngren

Look at the documentation I linked to learn how to use the element. Its an HTML5 element. Its not a Datatables option and does not need to be initialized. You provide the value and the max and the progress element displays the bar.

Kevin

zgoforth

I tried implementing my answer based off of the first response you had to my post, and no progress bar appears in my rowGroup row? https://jsfiddle.net/BeerusDev/9yqLfz07/83/

kthorngren

You are displaying the progress bar in the hidden column department using columnDefs. I made that column visible here so you can see it:
https://jsfiddle.net/m1oqav3h/

If you want the progress bar to show in the RowGroup row then you need to calculate the values in rowGroup.startRender and place the progress bar in the return statement at the end of the function.

Kevin

allan

I've just been having a look at this, and I don't see a progress bar on your grouping row, but then the start rendering isn't outputting a process bar:

.append('<td colspan="12" style="text-align: left;">' + group + ' (' + rows.count() + ')</td>')

Are you looking for something like this: https://jsfiddle.net/CloudTables/q4azek83/4/ ? It looks like you've already done all the percentage calculations - I've just added it to the output.

Allan

zgoforth

@allan why do I always make things seem so much harder than they need to be . This works! Thank you! Is there a way I can physically show the % number to the right of the bar as well?

zgoforth

fixed it with

.append('<td colspan="12" style="text-align: left;">' + group + ' (' + rows.count() + ') '+bar+''+ greenTotPerc+'%'+' </td>')

allan

That'll do it . Good to know you've got it working now.

Allan