Using DataTables With Sharepoint

zgoforth · August 2020

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 · August 2020

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

zgoforth · August 2020

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

kthorngren · August 2020

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 · August 2020

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

kthorngren · August 2020

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 · August 2020

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

kthorngren · August 2020

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 · August 2020

@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 · August 2020

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

kthorngren · August 2020

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 · August 2020

<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 · August 2020

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 · August 2020

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

Kevin

tangerine · August 2020

Why don't you have SharePoint return JSON?

zgoforth · August 2020

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

zgoforth · August 2020

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 · August 2020

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 · August 2020

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 · August 2020

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

zgoforth · August 2020

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 · August 2020

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

Using DataTables With Sharepoint - Page 2

Using DataTables With Sharepoint

Answers

Here is what it is returning.

Howdy, Stranger!

Categories

DataTables

Using DataTables With Sharepoint - Page 2

Using DataTables With Sharepoint

Answers

Here is what it is returning.

Howdy, Stranger!

Quick Links

Categories

DataTables