File
Add library
Share
Login or Register
Help
HTMLSaved
 
​
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
​
      <table width="100%" align="center" class="dataTable no-footer" id="Projectfield" role="grid" border="0" cellpadding="0">
        <thead>
          <tr role="row">
            <th class="sorting_disabled textCenterDescription" rowspan="1" colspan="1">Description</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Project Manager</th>
            <th class="sorting_disabled textCenter percentBar" rowspan="1" colspan="1">% Complete</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Status</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Progress</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Phase</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Scale</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Priority</th>
            <th class="sorting_disabled textCenter" rowspan="1" colspan="1">Programme</th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd">
            <td class="  textCenterDescription"> There are many variations </td>
            <td class="  textCenter">Boogaweb</td>
            <td class="  textCenter">61</td>
            <td class="  textCenter">
              <div class="pill-inprogress">In progress</div>
            </td>
            <td class="  textCenter">
              <div class="pill-onschedule">On Schedule</div>
            </td>
            <td class="  textCenter">Managing</td>
            <td class="  textCenter">Local</td>
            <td class="  textCenter">Medium</td>
            <td class="  textCenter">Not part of a Programme</td>
          </tr>
        </tbody>
      </table>
      
    </div>
  </body>
</html>
​
CSSSaved
 
.pill-onschedule {
    background-color: #A9D08E;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-overdue {
    background-color: #BE4A47;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-late {
    background-color: #F2C80F;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-done {
    background-color: #548235;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-onhold {
    background-color: #E6E6E6;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-notstarted {
    background-color: #D3DBE2;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    border: 1px dashed #444444;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-inprogress {
    background-color: #A9D08E;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-completed {
    background-color: #00B050;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
.pill-closed {
    background-color: #548235;
    text-align: center;
    box-sizing: border-box;
    padding: 4px 8px 5px;
    border-radius: 16px;
    min-height: 24px;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}
​
progress {
    height: 18px;
    /*accent-color: #548235;*/
    accent-color: #31752F;
    /*accent-color: #0078D7;*/
}
​
progress:after {
  content: attr(value)"%";
  position: absolute;
  left: 105%;
  top: 0;
}
progress[value] {
  position: relative;
}
​
table.dataTable.no-footer {
  border-bottom: 0;
}
​
table.dataTable.no-footer th {
  border-bottom-color: #c6c6c6;
  text-align: center;
}
​
.textCenter {
   text-align: center;
}
​
.textCenterDescription {
   text-align: justify;
   width:30%;
}
JavaScriptSaved
 
​
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) {
                                     return DataTable.render.percentBar(data,'round','#fff', '#FF9CAB', '#FF0033', '#FF9CAB', 0, 'solid');
                                 },
                                 "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);
        });
}
​
LoadProjectData();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers