Solved

DataTables - table not rendering.  No error either

Posted on 2016-10-05
5
39 Views
Last Modified: 2016-10-05
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
<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>

Open in new window


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();
});

Open in new window


Thanks for any help.
0
Comment
Question by:Isaac
  • 3
  • 2
5 Comments
 
LVL 9

Expert Comment

by:Karen
ID: 41830934
what do you mean by, "nothing happens"? does the table show at all?
0
 
LVL 5

Author Comment

by:Isaac
ID: 41830936
No the table does not show
0
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41830950
Well, you have a variable called htmlTbl containing some mark-up, but you do nothing with it.
You need to add it to the page.
0
 
LVL 5

Author Comment

by:Isaac
ID: 41830976
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.
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 41830977
Thanks!
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

We had a requirement to extract data from a SharePoint 2010 Customer List into a CSV file and then place the CSV file into a directory on the network so that the file could be consumed by an AS400 system. I will share in Part 1 how to Extract the Da…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now