Using DataTables With Sharepoint

zgoforth

suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:114 Uncaught TypeError: Cannot read property 'Url' of undefined
at Object.success (suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:114)
at u (suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:93)
at Object.fireWith [as resolveWith] (suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:93)
at C (suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:93)
at XMLHttpRequest.<anonymous> (suiteux.shell.crossdomainproxyiframe.3ca8ff8e1e12443e998e.js:93)

---

Uncaught ReferenceError: loadData is not defined
at HTMLDocument.<anonymous> (Deliverables.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage:598)
at fire (jquery-1.12.4.js:3232)
at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
at Function.ready (jquery-1.12.4.js:3582)
at HTMLDocument.completed (jquery-1.12.4.js:3617)

zgoforth

http://live.datatables.net/beherava/1/edit Here is my JS Bin

zgoforth

And I am positive my urls are correct. At the top of this post my first example, they work like a charm.

kthorngren

Do you want to use a button click to load the data or load it on page load?

I removed (commented out) the button click so the data loads on page load:
http://live.datatables.net/futewesu/1/edit

Kevin

zgoforth

@kthorngren Still the same thing... Nothing loads in the table.

kthorngren

Still the same thing..

Are you getting the same errors?

Please post a link to your page so we can help debug. Without seeing what you have its impossible for us to help. Otherwise you will need to step through your code to find out where it is failing. The problems you are having right now are not Datatables specific.

Kevin

zgoforth

@kthorngren I cannot "link" you to my sharepoint page? That is why I created the JS Bin

kthorngren

TheJS BIN works but doesn't have access to the URLs. Notice the 404 errors:

jquery-1.12.4.js:10254 GET https://x.sharepoint.com/sites/Projects/USMC/DARQ/_api/web/lists/getbytitle('DarQDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable 404

Without access to the URLs there is not much more we can do with the JS BIN test case.

Kevin

zgoforth

@kthorngren I am aware. I just replaced the site name with X because it doesn't matter in JS Bin. You cannot pull from a sharepoint site to a site like that especially with the privacy settings in place

zgoforth

@kthorngren It appears with this code, I am creating a new instance of datatable on every iteration

kthorngren

It appears with this code,

What "appears" with this cdoe. Which code, the test case or your code?

I am creating a new instance of datatable on every iteration

The test case isn't doing that.

Its not clear what the current problem is and what code your are using. If you can't link to a page that reproduces the problems you are having then you need to provide a specific problem description, any errors and the code.

Kevin

zgoforth

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<div class ="container">
<table id="myTable" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
</table>
</div>
<style>
div.container {
    min-width: 980px;
    margin: 0 auto;
}
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
</style>
<script>
function loadData() {
    var urls = ["https://x.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMODeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/DARQ/_api/web/lists/getbytitle('DarQDeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes", "https://x.sharepoint.com/sites/Projects/USMC/WBTn/_api/web/lists/getbytitle('WTBnDeliverables')/items?$select=Program,Deliverable,To,Date,Approved,Notes,"];
       
    for (i=0; i < urls.length; i++) {
      $.ajax({
        url: urls[i],
        success: function (data) {
          data = JSON.parse(data);
          var table = $('#myTable').DataTable();
          table.rows.add( data.data ).draw();
        }
      }); 
    } // missing bracket
}
$(document).ready(function() {
    
  $('#myTable').DataTable( {
    "columns": [
      { "data": "Program" },
      { "data": "Deliverable" },
      { "data": "To" },
      { "data": "Date" },
      { "data": "Approved" },
      { "data": "Notes" }
    ]
  } );
    
 loadData(data);
    
} );
</script>

This is the code I am using. And now it is returning the data Items to the console but doesn't populate the DataTable still.

Here is what it is returning.

<content type="application/xml"><m:properties><d:Notes xml:space="preserve">Example Notes
</d:Notes><d:Approved>Yes</d:Approved><d:Program>AMMO</d:Program><d:Date>12/23/2018</d:Date><d:To>example@example.com</d:To><d:Deliverable>Monthly Status Report (MSR)</d:Deliverable></m:properties></content></entry><entry m:etag="&quot;1&quot;"><id>fcac1456-e947-48a6-afef-40507f472e6f</id><category term="SP.Data.AMMODeliverablesListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'bf5f908a-8411-413f-b6fa-3c590977ae6c')/Items(32)" /><title /><updated>2020-08-26T14:48:37Z</updated><author><name /></author><content type="application/xml"><m:properties><d:Notes xml:space="preserve">Example Notes
</d:Notes><d:Approved>Yes</d:Approved><d:Program>AMMO</d:Program><d:Date>03/30/2020</d:Date><d:To>example@example.com</d:To><d:Deliverable>Meeting Minutes</d:Deliverable></m:properties></content></entry><entry m:etag="&quot;1&quot;"><id>6e58a7f8-4e01-4c02-9b41-f39ef8573a8e</id><category term="SP.Data.AMMODeliverablesListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'bf5f908a-8411-413f-b6fa-3c590977ae6c')/Items(33)" /><title /><updated>2020-08-26T14:48:37Z</updated><author><name /></author><content type="application/xml"><m:properties><d:Notes xml:space="preserve">Example Notes
</d:Notes><d:Approved>Yes</d:Approved><d:Program>AMMO</d:Program><d:Date>12/23/2018</d:Date><d:To>example@example.com</d:To><d:Deliverable>Monthly Status Report (MSR)</d:Deliverable></m:properties></content></entry><entry m:etag="&quot;1&quot;"><id>5def84d7-84f5-480d-876a-fb5689be1dd2</id><category term="SP.Data.AMMODeliverablesListItem" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" /><link rel="edit" href="Web/Lists(guid'bf5f908a-8411-413f-b6fa-3c590977ae6c')/Items(34)" /><title /><updated>2020-08-26T14:48:37Z</updated><author><name /></author><content type="application/xml"><m:properties><d:Notes xml:space="preserve">Example Notes
</d:Notes><d:Approved>Yes</d:Approved><d:Program>AMMO</d:Program><d:Date>03/30/2020</d:Date><d:To>example@example.com</d:To><d:Deliverable>Meeting Minutes</d:Deliverable></m:properties></content></entry></feed>

It is all in xml?

zgoforth

VM49247:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)
    at Object.success (Deliverables.aspx?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage:575)
    at fire (jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
    at done (jquery-1.12.4.js:9840)
    at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

kthorngren

Datatables expects JSON data as described here. You will need to convert the XML to JSON.

Kevin

tangerine

Why don't you have SharePoint return JSON?

zgoforth

@tangerine @kthorngren I thought it already did that as I parsed it in my ajax call?

zgoforth

Now it returns as

Approved: "Yes"
Date: "12/23/2018"
Deliverable: "Monthly Status Report (MSR)"
Notes: "Example Notes↵"
Program: "AMMO"
To: "example@example.com"

But still gives me the same Syntax Error

zgoforth

And I changed the ajax to look like

for (i=0; i < urls.length; i++) {
      $.ajax({
        url: urls[i],
        'headers': { 'Accept': 'application/json;odata=nometadata' },
        success: function (data) {
          data = JSON.parse(data);
          var table = $('#myTable').DataTable();
          table.rows.add( data.data ).draw();
        }
      }); 
    } // missing bracket
}

kthorngren

Now it returns as

Please post the full response from the XHR Response tab.

Likely you will need to change data.data in table.rows.add( data.data ). to match the structure of your JSON response.

But still gives me the same Syntax Error

You have posted many errors. Please provide the specific error.

Kevin

zgoforth

@kthorngren tried posting the full results from XHR tab but it will not post to the thread for some reason

zgoforth

Here are all three items returned in the console in the XHR tab

{"value":[{"Notes":"Example Notes\n","Approved":"Yes","Program":"AMMO","Date":"12/23/2018","To":"example@example.com","Deliverable":"Monthly Status Report (MSR)"},{"Notes":"Example Notes\n","Approved":"Yes","Program":"AMMO","Date":"03/30/2020","To":"example@example.com","Deliverable":"Meeting Minutes"},{"Notes":"Example Notes\n","Approved":"Yes","Program":"AMMO","Date":"12/23/2018","To":example@example.com","Deliverable":"Monthly Status Report (MSR)"},{"Notes":"Example Notes\n","Approved":"Yes","Program":"AMMO","Date":"03/30/2020","To":"example@example.com","Deliverable":"Meeting Minutes"}]}

{"value":[{"Notes":"Example Notes\n","Approved":"Yes","Program":"DAR-Q","Date":"12/23/2018","To":"example@example.com","Deliverable":"Monthly Status Report (MSR)"},{"Notes":"Example Notes","Approved":"Yes","Program":"DAR-Q","Date":"12/3/2017","To":"example@example.com","Deliverable":"Meeting Minutes"},{"Notes":"Example notes.","Approved":"Yes","Program":"DAR-Q","Date":"03/30/2020","To":"example@example.com","Deliverable":"Meeting Minutes"},{"Notes":"Example notes","Approved":"No","Program":"DAR-Q","Date":"02/20/2020","To":"example@example.com","Deliverable":"Monthly Status Report (MSR)"}]}

{"value":[{"Notes":"Example Notes","Approved":"No","Program":"WTBn","Date":"4/17/2020","To":"example@example.com","Deliverable":"Monthly Status Report (MSR)"},{"Notes":"Example Notes\n","Approved":"Yes","Program":"WTBn","Date":"12/23/2018","To":"example@example.com","Deliverable":"Meeting Minutes"},{"Notes":"example notes","Approved":"Yes","Program":"WTBn","Date":"4/17/2020","To":"example@example.com","Deliverable":"Meeting Minutes"},{"Notes":"Example notes\n","Approved":"Yes","Program":"WTBn","Date":"05/12/2020","To":"example@example.com","Deliverable":"Meeting Minutes"}]}

kthorngren

I think your question was answered in your other thread. If not please post your question otherwise we will assume this thread is complete.

Kevin