Displaying ListView in Jquery DataTable

@Dharmraj: Thanks for replying.

I am using a CEWP on the homepage of a sharepoint online site and have linked the js and css required for the jquery datatable plugin and also the custom js file which is used to fetch the listdata using Rest api. I am not getting any data in the datatable. Am I missing something?

The code is as below:

$(document).ready(function () {
loadListData();
});
function loadListData() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var restUrl = siteUrl + "/_api/web/lists/getbytitle('LeaveRequest')/items?$select=StartDate,EndDate,HalfDay,LeaveType,Approver/Title,ReasonForLeave,ApproverComments,RequestDays,ApprovalStatus&$expand=Approver";
$.ajax({
url: restUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccess,
error: myError
});
}
function mySuccess(data) {
try {
var dataTableExample = $('#table_id').DataTable();
if (dataTableExample != 'undefined') {
dataTableExample.destroy();
}
dataTableExample = $('#table_id').DataTable({
scrollY: 300,
"aaData": data.d.results,
"aoColumns": [{
"mData": "StartDate",
"render": function (mData) {
var date = new Date(mData);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
},{
"mData": "EndDate",
"render": function (mData) {
var date = new Date(mData);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
}, {
"mData": "HalfDay"
}, {
"mData": "LeaveType"
}, {
"mData": "Approver"
}, {
"mData": "ReasonForLeave"
}, {
"mData": "ApproverComments"
}, {
"mData": "RequestDays"
}, {
"mData": "ApprovalStatus"
}]
});
} catch (e) {
alert(e.message);
}
}
function myError(data, errCode, errMessage) {
alert("Error: " + errMessage);
}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Shail S8y ago
@Dharmraj: Thanks for replying.

I am using a CEWP on the homepage of a sharepoint online site and have linked the js and css required for the jquery datatable plugin and also the custom js file which is used to fetch the listdata using Rest api. I am not getting any data in the datatable. Am I missing something?

The code is as below:
$(document).ready(function () {
loadListData();
});
function loadListData() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var restUrl = siteUrl + "/_api/web/lists/getbytitle('LeaveRequest')/items?$select=StartDate,EndDate,HalfDay,LeaveType,Approver/Title,ReasonForLeave,ApproverComments,RequestDays,ApprovalStatus&$expand=Approver";
$.ajax({
url: restUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccess,
error: myError
});
}
function mySuccess(data) {
try {
var dataTableExample = $('#table_id').DataTable();
if (dataTableExample != 'undefined') {
dataTableExample.destroy();
}
dataTableExample = $('#table_id').DataTable({
scrollY: 300,
"aaData": data.d.results,
"aoColumns": [{
"mData": "StartDate",
"render": function (mData) {
var date = new Date(mData);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
},{
"mData": "EndDate",
"render": function (mData) {
var date = new Date(mData);
var month = date.getMonth() + 1;
return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
}
}, {
"mData": "HalfDay"
}, {
"mData": "LeaveType"
}, {
"mData": "Approver"
}, {
"mData": "ReasonForLeave"
}, {
"mData": "ApproverComments"
}, {
"mData": "RequestDays"
}, {
"mData": "ApprovalStatus"
}]
});
} catch (e) {
alert(e.message);
}
}
function myError(data, errCode, errMessage) {
alert("Error: " + errMessage);
}
Dharmraj Thakur8y ago
Hello,
If you generated ready table with data then just need to add library of jquery datatable and initialize the datatable to your html table like below screenshot...