Displaying ListView in Jquery DataTable

Question

Hi, I want to display the listview using jquery datatable. The list i am using has Peoplepicker fields, Choice Fields, DateFields, Number field etc. I want to display them in the datatable using jquery datatable plugin. How can i achieve this? Please help...

Shail S · Answer

@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 Thakur · Answer

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...