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
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>
AJAXMicrosoft SharePointJavaScript
Last Comment
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:
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>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
That worked. Thanks!
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.
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:
Open in new window
And we cannot test as the api call requires authentication :-(
HTH
Rainer