Dynamic Columns with dynamic data using sharpoint rest api
Dynamic Columns with dynamic data using sharpoint rest api
Hi Team,
I am using sharepoint rest api to get data in jquery data table, everything working perfectly if i am hard coding columns in table html like below:
<html>
<body>
<table id="employeeList" class="table table-striped table-bordered1 table-condensed table-hover table-fullfixed">
<thead>
<tr>
<th>Title</th>// Should be hyperkink
<th>Last Name</th>
<th>Week1 date</th>// Should show date of current week Monday
<th>Week2 date</th>// next week Monday date
<th>Week3 date</th>//next to next week Monday date
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
but now i want these columns to be dynamic like showing week columns based on today date.
also i will have to bind date accordingly.
// getting data
function execCrossDomainRequest() {
var executor;
executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url: employeeListQueryUrl,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: employeeSuccessHandler,
error: errorHandler
}
);
}
function employeeSuccessHandler(data) {
var jsonObject = JSON.parse(data.body);
var results = jsonObject.d.results;
fillData(results, EmployeesList);
$("#employeeList").dataTable({ aaSorting: [[4, 'desc']] });
}
// filling data
function fillData(results, _ListName) {
var $appContent = $('#employeeList tbody');
for (var i = 0; i < results.length; i++) {
var $tr = $('<tr/>');
$('<td/>').text(results[i].Title).appendTo($tr);
$('<td/>').text(results[i].LastName).appendTo($tr);
$('<td/>').text(results[i].Week1Hours).appendTo($tr);
$('<td/>').text(results[i].Week2Hours).appendTo($tr);
$('<td/>').text(results[i].Week3Hours).appendTo($tr);
$tr.appendTo($appContent);
}
}
Now issue is how should i proceed with the adding week dates dynamically and also i would like to show Title column as hyperlink column.
Data table should display data dynamically from SharePoint and column headers should be dynamic based on today' date, also first column will be a hyperlink column.
Thanks,
Answers
What does your DataTable configuration look like? I have a few ideas but want to see what you have first. Also, any chance you could dump it into a test bed would make it easier.
Data table should display data dynamically from SharePoint and column headers should be dynamic based on today' date, also first column will be a hyperlink column.
Okay so just off the top of my head, my suggestion would be to create a container div for your table.
Then every time new data is pulled and needs to be loaded into table, using http://aefxx.com/api/jqote2-reference/, you can re-create your table (headers and data) within the container. http://aefxx.com/api/jqote2-reference/#jqotesub
Once that is complete, call the .DataTable() config.
Another posed the same question and figured out a solution
https://datatables.net/forums/discussion/34654/add-or-remove-column-dynamically#latest