HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/sites/TestSite/Style Library/Homepage/js/jquery.min.js"></script>
<script src="/sites/TestSite/Style Library/Homepage/js/bootstrap.min.js"></script>
<script src="/sites/TestSite/Style Library/Homepage/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="/sites/TestSite/Style Library/Homepage/css/bootstrap.min.css">
<link rel="stylesheet" href="/sites/TestSite/Style Library/Homepage/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="/sites/TestSite/Style Library/Homepage/css/font-awesome.css">
<link rel="stylesheet" href="/sites/TestSite/Style Library/Homepage/css/internaljob.css">
<style>
#internaljob_div
{
width: 105% !important;
}
.container
{
margin-left:44px !important;
}
tbody th, table.dataTable tbody td
{
padding: 8px 9px !important;
}
/*table.dataTable thead th, table.dataTable thead td
{
padding: 8px 8px !important;
}*/
#internaljobs_tbl
{
width: 105%;
table-layout: fixed;
text-align: left;
vertical-align: top;
}
.refcodeth
{
width: 55px;
}
.positionth
{
width: 55px;
}
.jobdescriptionth
{
width:104px
}
.businessunitth
{
width:50px;
}
.gradeth
{
width:35px
}
.regionth
{
width:51px
}
.worklocationth
{
width:65px;
}
.conceptth
{
width:60px
}
.functionth
{
width:80px
}
.yrsth
{
width:60px
}
.eligiblegradeth
{
width: 40px;
}
.positionth
{
width:56px
}
.expiryth
{
width:56px;
}
.IJPnameth
{
width:73px;
}
.IJPcode
{
width: 52px;
}
applyth
{
width: 32px;
}
.ms-rtestate-field TABLE, .ms-rtestate-write TABLE {
border-collapse: collapse;
display: block;
}
sup {
font-size: 100% !important;
}
</style>
<script>
$(document).ready(function () {
Retrieveinternaljob();
});
var id = '';
var positiontitle = '';
var arrinternaljob = [];
function Retrieveinternaljob() {
try {
var content1 = '<table id="internaljobs_tbl" class="table table-hover internaljobcls"><thead><tr><th class="refcodeth">Reference Code</th><th class="positionth">Position Title</th><th class="jobdescriptionth">Job Description<br/><br/></th><th class="businessunitth">Business Unit</th><th class="gradeth">Grade<br/><br/></th><th class="regionth">Region<br/><br/></th><th class="worklocationth">Work Location</th><th class="conceptth">Concept<br/><br/></th><th class="functionth">Function<br/><br/></th><th class="yrsth">Years of Experience</th><th class="eligiblegradeth">Eligible Grade</th><th class="positionth">Position Date</th><th class="expiryth">Expiry Date</th><th class="IJPnameth">IJP SPOC Employee Name</th><th class="IJPcode">IJP SPOC Employee Code</th><th class="applyth">Apply<br/><br/></th></tr></thead><tbody id="internaljob_body">';
var positiondate = '';
var expirydate = '';
var listname = "Lst_InternalJobs";
var d = new Date();
d.setDate(d.getDate()-1);
d.setUTCHours(11,59,59,0);
var currentdate = d.toISOString();
//var d = new Date();
//var currentdate = d.toISOString();
/*Both postion date and expiry date*/
//var resturl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listname + "')/items?$select=Id,Reference_Code,Position_x0020_Title,Job_Description,Business_x0020_Unit/Org_Name,Grade,Region/Region_Name,Location/Location_Name,Concept/SBU_Name,Function/Dept_Name,Years_x0020_of_x0020_Experience_,Eligible_x0020_Grade,Award_Date,Expiry_Date,IJP_SPOC_Employee_Name,IJP_SPOC_Employee_Code,IsArchive,Current_x0020_Status&$expand=Business_x0020_Unit,Concept,Function,Region,Location&$filter=(IsArchive eq '1')and(Current_x0020_Status eq 'Open')and(Award_Date le datetime'" + currentdate + "' and Expiry_Date ge datetime'" + currentdate + "')&$orderby=Id desc&$top=20000";
/*Only Expiry date */
var resturl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listname + "')/items?$select=Id,Reference_Code,Position_x0020_Title,Job_Description,Business_x0020_Unit/Org_Name,Grade,Region/Region_Name,Location/Location_Name,Concept/SBU_Name,Function/Dept_Name,Years_x0020_of_x0020_Experience_,Eligible_x0020_Grade,Award_Date,Expiry_Date,IJP_SPOC_Employee_Name,IJP_SPOC_Employee_Code,IsArchive,Current_x0020_Status&$expand=Business_x0020_Unit,Concept,Function,Region,Location&$filter=(Current_x0020_Status eq 'Open')and(Expiry_Date ge '" + currentdate + "')&$orderby=Id desc&$top=20000";
$.ajax({
url: resturl,
type: "GET",
headers:
{
"accept": "application/json;odata=verbose",
},
async: false,
success: function (data) {
if (data.d.results.length > 0) {
$.each(data.d.results, function (index, item) {
arrinternaljob[index] = { referencecode: item.Id != null ? item.Id : '', positiontitle: item.Position_x0020_Title != null ? item.Position_x0020_Title : '', jobdescription: item.Job_Description != null ? item.Job_Description : '', businessunit: item.Business_x0020_Unit.Org_Name != null ? item.Business_x0020_Unit.Org_Name : '', grade: item.Grade != null ? item.Grade : '', region: item.Region.Region_Name != null ? item.Region.Region_Name : '', worklocation: item.Location.Location_Name != null ? item.Location.Location_Name : '', concept: item.Concept.SBU_Name != null ? item.Concept.SBU_Name : '', functions: item.Function.Dept_Name != null ? item.Function.Dept_Name : '', yrsofexp: item.Years_x0020_of_x0020_Experience_ != null ? item.Years_x0020_of_x0020_Experience_ : '', eligiblegrade: item.Eligible_x0020_Grade != null ? item.Eligible_x0020_Grade : '', positiondate: item.Award_Date != null ? item.Award_Date : '', expirydate: item.Expiry_Date != null ? item.Expiry_Date : '', ijpspocname: item.IJP_SPOC_Employee_Name != null ? item.IJP_SPOC_Employee_Name : '', ijpspoccode: item.IJP_SPOC_Employee_Code != null ? item.IJP_SPOC_Employee_Code : '', Id: item.Id != null ? item.Id : '' };
positiondate = arrinternaljob[index].positiondate;
var d1 = new Date(positiondate.split("/").reverse().join("-"));
positiondate = (d1.getDate() < 10 ? '0' : '') + d1.getDate() + '/' +
((d1.getMonth() + 1) < 10 ? '0' : '') + (d1.getMonth() + 1) + '/' +
d1.getFullYear();
expirydate = arrinternaljob[index].expirydate;
var d2 = new Date(expirydate.split("/").reverse().join("-"));
expirydate = (d2.getDate() < 10 ? '0' : '') + d2.getDate() + '/' +
((d2.getMonth() + 1) < 10 ? '0' : '') + (d2.getMonth() + 1) + '/' +
d2.getFullYear();
content1 += "<tr><td>" + arrinternaljob[index].referencecode + "</td><td class='positiontd'>" + arrinternaljob[index].positiontitle + "</td><td class='jobdesctd'>" + arrinternaljob[index].jobdescription + "</td><td>" + arrinternaljob[index].businessunit + "</td><td>" + arrinternaljob[index].grade + "</td><td>" + arrinternaljob[index].region + "</td><td>" + arrinternaljob[index].worklocation + "</td><td>" + arrinternaljob[index].concept + "</td><td>" + arrinternaljob[index].functions + "</td><td>" + arrinternaljob[index].yrsofexp + "</td><td>" + arrinternaljob[index].eligiblegrade + "</td><td>" + positiondate + "</td><td class='ijpspoctd'>" + expirydate + "</td><td>" + arrinternaljob[index].ijpspocname + "</td><td>" + arrinternaljob[index].ijpspoccode + "</td><td><a onclick=ApplyInternaljobs(" + arrinternaljob[index].referencecode + ",'" + escape(arrinternaljob[index].positiontitle) + "')>Apply</a></td></tr>";
});
}
else {
var norecord = "<span style='color:red'>No Record Found</span>";
content1 += "<tr><td colspan='16'>" + norecord + "</td></tr>";
}
content1 += "</tbody></table>";
$('#internaljob_div').append(content1);
$('#internaljobs_tbl').DataTable({
"pagingType": "full_numbers",
"order": [[0, "desc"]],
"ordering": false,
"autoWidth": false
});
}
});
}
catch (e) {
alert(e.message);
}
}
function ApplyInternaljobs(id, positiontitle) {
positiontitle = unescape(positiontitle);
window.location.href = "/sites/TestSite/Pages/LaunchPadUpload.aspx?JCode=" + id + "&Position=" + positiontitle + "";
}
</script>
</head>
<body>
<section>
<div class="container">
<h2>Launchpad</h2>
<hr>
<div class="row">
<div id="internaljob_div">
</div>
</div>
</div>
</section>
</body>
</html>
CSS Code:
/*table design*/
.table-responsive {
min-height: .01%;
overflow-x: auto;
display: block;
width: 100%;
}
.internaljobcls tr th
{
background:#354a5f;
color:#fff;
}
.internaljobcls thead
{
border: 2px solid #ccc;
}
.internaljobcls tbody
{
border: 1px solid #ccc;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
border-top:0px;
border-right: 1px solid #ccc;
}
.internaljobcls
{
font-size: 11px;
}
.dataTables_filter label input
{
font-weight:100;
}
.applycls a:visited
{
color: #663399 !important;
text-decoration: none !important;
}
#pageTitle
{
display:none !important;
}
/*
/* Section One
.mytable th { background: #c5c5c5;}
.mytable {
border-collapse: collapse;
border: 1px solid #cdcdcd;
font: normal 12px arial;
width: 100%;
}
.mytable tr th { border: 1px solid #cdcdcd; padding: 2px;}
/* Section two
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Section three
.mytable,.mytable thead,.mytable tbody,.mytable tr th,.mytable tr td,.mytable tr {
display: block;
}
/* Section four
.mytable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.mytable tr { border-bottom: 1px solid #ccc; }
/* Section five
.mytable td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.mytable td:before {
position: absolute;
top: 3px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
/* Section six
.mytable td:nth-of-type(1):before { content: "Position Title"; }
.mytable td:nth-of-type(2):before { content: "Job Description"; }
.mytable td:nth-of-type(3):before { content: "Business Unit"; }
.mytable td:nth-of-type(4):before { content: "Grade"; }
.mytable td:nth-of-type(5):before { content: "Region"; }
.mytable td:nth-of-type(6):before { content: "Work Location"; }
.mytable td:nth-of-type(7):before { content: "Concept"; }
.mytable td:nth-of-type(8):before { content: "Function"; }
.mytable td:nth-of-type(9):before { content: "Years of Experience"; }
.mytable td:nth-of-type(10):before { content: "Eligible Grade"; }
.mytable td:nth-of-type(11):before { content: "Position Date"; }
.mytable td:nth-of-type(12):before { content: "Expiry Date"; }
.mytable td:nth-of-type(13):before { content: "Years of Experience"; }
.mytable td:nth-of-type(14):before { content: "IJP SPOC Employee Name"; }
.mytable td:nth-of-type(15):before { content: "IJP SPOC Employee Name"; }
.mytable td:nth-of-type(16):before { content: "Apply"; }
}
/* Section seven
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
padding: 0;
margin: 0;
width: 320px; }
}
/* Section eight
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
body {
width: 495px;
}
}
*/
