Percentage bar in Datatables

Booga

In this code I am trying to display a percentage or progress bar inside a TD in Datatables, but totally lost.

Any help please?

`<script type="text/javascript">
var ProjectUID;
ExecuteOrDelayUntilScriptLoaded(getProjectUIDProperty, "sp.js");
function getProjectUIDProperty() {
var ctx = new SP.ClientContext.get_current();
this.web = ctx.get_web();
this.props = this.web.get_allProperties();
ctx.load(this.web);
ctx.load(this.props);
ctx.executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, failedGettingProperty));
}
function gotProperty() {
ProjectUID = this.props.get_item('MSPWAPROJUID');
LoadProjectData();
}
function failedGettingProperty() {
alert('Error: ' + args.get_message());
}
function LoadProjectData() {
var data = $.ajax({url: _spPageContextInfo.siteAbsoluteUrl + "/_api/ProjectData/Projects(guid'"+ ProjectUID +"')?"
+ "$select=Description,ProjectOwnerName,ProjectPercentCompleted,ProjectState,Progress,ProjectPhase,Scale,ProjectPriority,Programme",
type: "GET",
dataType: "json",
headers: {Accept: "application/json;odata=verbose" }
});
data.done(function (data,textStatus, jqXHR){
if (data.d.results == undefined) {
data.d.results = new Array();
data.d.results[0] = new Object();
data.d.results[0].Description = data.d.Description;
data.d.results[0].ProjectOwnerName = data.d.ProjectOwnerName;
data.d.results[0].ProjectPercentCompleted = data.d.ProjectPercentCompleted;
data.d.results[0].ProjectState = data.d.ProjectState;
data.d.results[0].Progress = data.d.Progress;
data.d.results[0].ProjectPhase = data.d.ProjectPhase;
data.d.results[0].Scale = data.d.Scale;
data.d.results[0].ProjectPriority = data.d.ProjectPriority;
data.d.results[0].Programme = data.d.Programme;
}
$('#Projectfield').dataTable( {
"bDestroy": true,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"bProcessing": true,
"bPaginate": false,
"bSort": false,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "Description", className:"textCenterDescription" },
{ "mData": "ProjectOwnerName", className:"textCenter" },
{ "mData": "ProjectPercentCompleted", className:"textCenter" },
{ "mData": "ProjectState", className:"textCenter" },
{ "mData": "Progress", className:"textCenter" },
{ "mData": "ProjectPhase", className:"textCenter" },
{ "mData": "Scale", className:"textCenter" },
{ "mData": "ProjectPriority", className:"textCenter" },
{ "mData": "Programme", className:"textCenter" }
],
"aoColumnDefs": [

                             { "mRender": function (data, type, full) {
                                percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                             }, 

                             "aTargets": [2]
                             },

                             { "mRender": function (data, type, full) {
                                return parseFloat(data).toFixed(0) + "%";
                             },

                             "aTargets": [2]
                             },
                             { "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) 
                                {
                                   if (sData == 'In progress') { 
                                      $(nTd).html('<div class="pill-inprogress">'+sData+'</div>');
                                   } else if (sData == 'Completed') { 
                                      $(nTd).html('<div class="pill-completed">'+sData+'</div>').css('color', 'white');  
                                   } else if (sData == 'Cancelled') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white');   
                                   } else if (sData == 'Closed - Premature') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'Closed - Planned') { 
                                      $(nTd).html('<div class="pill-closed">'+sData+'</div>').css('color', 'white');
                                   } else if (sData == 'On Hold') { 
                                      $(nTd).html('<div class="pill-onhold">'+sData+'</div>').css('color', '#666666'); 
                                   } else if (sData == 'Not Started') { 
                                      $(nTd).html('<div class="pill-notstarted">'+sData+'</div>'); 
                                   } else { 
                                      $(nTd).css('background-color', 'white'); 
                                   }
                                },
                             "aTargets": [3]
                             },

                             { "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) 
                                {
                                   if (sData == 'On Schedule') { 
                                      $(nTd).html('<div class="pill-onschedule">'+sData+'</div>');
                                   } else if (sData == 'Overdue') { 
                                      $(nTd).html('<div class="pill-overdue">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'Late') { 
                                      $(nTd).html('<div class="pill-late">'+sData+'</div>'); 
                                   } else if (sData == 'Done') { 
                                      $(nTd).html('<div class="pill-done">'+sData+'</div>').css('color', 'white'); 
                                   } else if (sData == 'On Hold') { 
                                      $(nTd).html('<div class="pill-onhold">'+sData+'</div>').css('color', '#666666'); 
                                   } else if (sData == 'Not Started') { 
                                      $(nTd).html('<div class="pill-notstarted">'+sData+'</div>'); 
                                   } else { 
                                      $(nTd).css('background-color', 'white'); 
                                   }
                                },
                             "aTargets": [4]
                             }

                          ],
                          });
    });
    data.fail(function (jqXHR,textStatus,errorThrown){
        //alert("Error retrieving project data: " + jqXHR.responseText);
    });

}
</script>`

kthorngren

Thats a lot of code to dig through to try understanding what is wrong. Please post a link to your page or a test case showing what you are doing so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Maybe this example will help.

Kevin

Booga

Hi!

Thanks for the reply, unfortunately this JS is part of a Project Site in Project Online, willing to share but not possible.

The TD has the value of the percentage, my problem is how to render the progress or perfentage bar in the lines 1 and 2 of the code formatted part.

The rest of the code works perfect.

kthorngren

With columns.render you always need to return something. Maybe you need this:

                         { "mRender": function (data, type, full) {
                            return percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                         },

If this doesn't help then please build a simple test with an example of your data and with the percentBar so we can see what you have to help debug.

Kevin

Booga

Finally tried the HTML5 approach:

    `{ data: 'sData',
       render: function (data, type, row, meta) 
         {
           return type === 'display' ? '<progress value="' + data + '" max="100"></progress>&nbsp;&nbsp;' + data + '%': data;
         },
      "aTargets": [2]
      },`

With this result:

Booga

Hi! Willing to give it a try to percentBar in the following CodePen:

https://codepen.io/Boogaweb/pen/QWVaRdV

Any suggestion on rendering the bar? JS code related is on lines 69 to 81. Basically, the current percentage value is 61 as displayed in the html but no bar is rendered with percentBar. The goal is to have it like this https://codepen.io/RedJokingInn/pen/jMZeQN

kthorngren

I see you are trying to use this plugin. I hadn't seen it before.

Your test case has a couple of errors. Look in the browser's console. I don't have a codepen account so any changes I would make won't be saved. Fix the errors and we can take another look. Maybe consider moving your test case to https://live.datatables.net/ or https://jsfiddle.net/ that doesn't require an account to save changes.

Also you are trying to use createdCell for the percentageBars. You need to use columns.render as the docs state and as shown in the working example.

Kevin

Booga

Moved to: https://live.datatables.net/mehaxeqe/1/edit?html,css,js,console,output

For column [2] (% Complete) I am using the below to render 61 to a percentBar:

 {
   "mRender": function (data, type, full) {
   return DataTable.render.percentBar(data,'round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
    },
    "aTargets": [2]
  },

kthorngren

The test case isn't loading any data nor initializing Datatables. You might need to simulate the data instead of trying an ajax request.

The working example looks like this:

{
      targets: 4,
      render: $.fn.dataTable.render.percentBar('round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid')
}

You have this:

                                 { "mRender": function (data, type, full) {
                                     return DataTable.render.percentBar(data,'round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                                 },
                                 "aTargets": [2]
                                 },

One problem is you have the columns.targets in a separate object from columns.render. You don't want to use the columns.render function but use it like the working example. Change your code like the working example.

Kevin

Booga

Changed the code as per the working example. Sorry, not being an experienced JS developer… How do I make datatables to be rendered?

kthorngren

Sorry, not being an experienced JS developer

We all have to start somewhere

How do I make datatables to be rendered?

You will need to call the LoadProjectData() function. Also note that you have removed the jQuery and Datatables libraries from the HTML tab. I added those back and placed the call to LoadProjectData() here:
https://live.datatables.net/mehaxeqe/3/edit

The test case still doesn't run due to missing components. You can replace the ajax call and use Javascript sourced data like this example.

Kevin

Booga

Cool, let me work on it, thanks so much!