Link to home
Start Free TrialLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

Reading data from an ajax call - data from sharepoint

In my Ajax success call (complete()), I want to use the data returned to build a table but not sure how to go about it.
How can i get the data?  It's coming from a SharePoint list.

http://isaac.issharepoint.com/ICTT/Shared%20Documents/modalTable.aspx

<!DOCTYPE html>

<html>
<head>
	<title></title>

<script>
	$(document).ready(function(){
		$('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
		})

		getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
	});


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {
 alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }

}


</script>
</head>
<body>
<!--
The ColVis extension adds an additional flag named "C" to the dom types.
The setting tells DataTables:
- Use the type C
- Create a div with the class "clear"
- The last option list are DataTable types / elements to set the order in which the elements are created

Should be:
<div class="wrapper">
      {length}
      {filter}
      {processing}
      {table}
      {information}
      {pagination}
    </div>
See:
https://datatables.net/reference/option/dom

HTH
Rainer
-->
<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
	<thead>
		<tr role="row">
			<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">Name</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Position</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">Office</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 92px;">Start date</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th rowspan="1" colspan="1">Name</th>
			<th rowspan="1" colspan="1">Position</th>
			<th rowspan="1" colspan="1">Office</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Age</th>
			<th rowspan="1" colspan="1">Start date</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
		</tr>
	</tfoot>
	<tbody id="dtData">

	</tbody>
</table>

</body>

</html>

Open in new window

Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
it looks like you are using a content editor web part. The main problem is that you inserted a complete HTML document - therefore this page has two HTML opening tags, two heads, two body`s ...

Can you please try this:
<link rel="stylesheet" type="text/css" href="http://isaac.issharepoint.com/ICTT/SiteAssets/media/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="http://isaac.issharepoint.com/ICTT/SiteAssets/ColVis/css/dataTables.colVis.css" />
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/media/js/jquery.js"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://isaac.issharepoint.com/ICTT/SiteAssets/ColVis/js/dataTables.colVis.js"></script>
<script type="text/javascript">
function CreateDataTable() {
	jQuery('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
	});

	getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
}

function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
	function complete(data) {
		alert("Completed successfully.");
	}
	function failure(data) {
		alert("Operation failed.");
	}
}
_spBodyOnLoadFunctionNames.push("CreateDataTable");

</script>

<input type="button" value="Close" onclick="window.frameElement.cancelPopUp(); return false;" />
<table id="example" class="display nowrap dataTable dtr-inline" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
	<thead>
		<tr role="row">
			<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 137px;">Name</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 215px;">Position</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 102px;">Office</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 42px;">Age</th>
			<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 92px;">Start date</th>
			<th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 79px;">Salary</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th rowspan="1" colspan="1">Name</th>
			<th rowspan="1" colspan="1">Position</th>
			<th rowspan="1" colspan="1">Office</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Age</th>
			<th rowspan="1" colspan="1">Start date</th>
			<th class="dt-body-right" rowspan="1" colspan="1">Salary</th>
		</tr>
	</tfoot>
	<tbody id="dtData">

	</tbody>
</table>

Open in new window


And we cannot test as the api call requires authentication :-(

HTH
Rainer
Avatar of Isaac

ASKER

That was not the problem but now I get a different error.  Error: Object doesn't support property or method 'appendChild'.

Here's a snippet of code:

<script>
	$(document).ready(function(){
		$('#example').DataTable({		
		"sDom": 'C<"isaac">lfrtip'
		})

		getListItems('http://isaac.issharepoint.com/ICTT','IceCreamTrucks','complete', 'failure');
	});


function getListItems(url, listname, complete, failure) {

    // Executing our items via an ajax request
    $.ajax({
        url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            complete(data); // Returns JSON collection of the results
        },
        error: function (data) {
            failure(data);
        }
    });
function complete(data) {


for(var i =0; i < data.d.results.length; i++) {

var tblData = "<tr>";
    tblData += "<td>"+data.d.results[i].State+"</td>";
    tblData += "<td>"+data.d.results[i].Town+"</td>";
    tblData += "<td>"+data.d.results[i].County+"</td>";
    tblData += "<td>"+data.d.results[i].NumberOfTrucks+"</td>";
    tblData += "</tr>";	
}

$(tblData).appendChild("#dtData");


 alert("Completed successfully.");
 }
function failure(data) {
 alert("Operation failed.");
 }

}


</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac

ASKER

That worked. Thanks!
Avatar of Isaac

ASKER

I may need your help again because even though the data now appears, it's acting weird.  When I try any of the dataTable functionality, all my data disappears.