Isaac
asked on
DataTables - table not rendering. No error either
Hi All,
I have a SharePoint list and I am trying to convert my list to a datatable but nothing happens. Here's my site and code:
http://isogunro.com/demos/PF/_layouts/15/start.aspx#/SitePages/Home.aspx
FileName: JSOMPrioritize.html
FileName: JSOMPrioritize.js
Thanks for any help.
I have a SharePoint list and I am trying to convert my list to a datatable but nothing happens. Here's my site and code:
http://isogunro.com/demos/PF/_layouts/15/start.aspx#/SitePages/Home.aspx
FileName: JSOMPrioritize.html
<script type="text/javascript" src="http://isogunro.com/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="http://isogunro.com/_layouts/15/sp.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://isogunro.com/demos/PF/Webpart/Prioritize/JSOMPrioritize.js"></script>
FileName: JSOMPrioritize.js
$(function() {
retrieveListItems();
});
function retrieveListItems() {
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('ParkFundingForm');
/*
CAML (Collaborative Application Markup Language) Query is a query language used in SharePoint
to define the query for list items. You can specify which items to return based on criteria much like a SQL
query, although they look nothing alike. In this example, we simply create an empty query using the new
SP.CamlQuery() method. When you query a list, you must provide a CAML query, even if no parameters are
defined. If you pass an empty query, as in this example, you are in effect asking for all items to be returned.
In practice, this is not a great idea, since a lot of lists contain hundreds or thousands of items. After we’ve
created the query, we pass it to the oList.getItems() method to perform the query. Just as in the other
examples, we use a global variable called collListItems using the this keyword. Finally, we “load” the
query and execute it.
http://msdn.microsoft.com/en-us/library/ms467521(v=office.15).aspx.
*/
var camlQuery = new SP.CamlQuery();
/*camlQuery.set_viewXml(
'<ViewFields>' +
'<FieldRef Name=\'Author\' />' +
'<FieldRef Name=\'Description\' />' +
'<FieldRef Name=\'Status\' />' +
'</ViewFields>' +
'<Where>' +
'<Eq>' +
'<FieldRef Name=\'Status\' />'+
' <Value Type=\'Choice\'>On-time</Value>'+
' </Eq>'+
' </Where>');*/
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
var htmlTbl = "<table id='prioritize' class='display' cellspacing='0' width='100%'>";
htmlTbl += "<thead><th>Priority Number</th><th>Title</th><th>Project Name</th><th>Project Number</th></thead>";
htmlTbl += "<tbody>";
var items=[];
function onQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
htmlTbl += "<tr><td>"+oListItem.get_item('PriorityNumber')+"</td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
//listItemInfo += '<strong>Title: </strong> ' + oListItem.get_item('Description') + '<br />'+oListItem.get_item('Status') + '<br />'+oListItem.get_item('ID');
//items.push([oListItem.get_item('ID'),oListItem.get_item('PriorityNumber')]);
//alert(items);
}
htmlTbl += "</tbody></table>";
//alert(htmlTbl);
//$("#divListItems").html(listItemInfo);
}
function onQueryFailed(sender, args) {
$("#divListItems").html(listItemInfo);
}
function onQueryFailed(sender, args) {
alert('Request failed. '+args.get_message() + '\n' + args.get_stackTrace());
}
$(document).ready(function() {
$('#prioritize').DataTable();
});
Thanks for any help.
what do you mean by, "nothing happens"? does the table show at all?
ASKER
No the table does not show
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Oh my....thanks!
Any idea why it's not rendering as a datatable?
I'll still give you the points and open it up as another question.
Any idea why it's not rendering as a datatable?
I'll still give you the points and open it up as another question.
ASKER
Thanks!