Solved

DataTabe not rendering correctly...

Posted on 2016-10-05
2
29 Views
Last Modified: 2016-10-05
My datatable is not rending correctly. Any ideas why?

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

<div id="divListItems"></div>

Open in new window



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

function onQueryFailed(sender, args) {
	alert('Request failed. '+args.get_message() + '\n' + args.get_stackTrace());
}

$(document).ready(function() {
    $('#prioritize').DataTable();
});

Open in new window

0
Comment
Question by:Isaac
2 Comments
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41830981
I'm guessing there is a race between when you initialise the data table, and when you add the html to your page.
Try changing onQuerySucceeded function so initialisation happens after you add the table to the page, i.e.

$("#divListItems").html(htmlTbl);
$('#prioritize').DataTable();
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 41830987
Thanks! Makes sense.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

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…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

757 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

18 Experts available now in Live!

Get 1:1 Help Now