SharePoint list using Datatables

mogreer

I have bee unable to retrieve data from my SharePoint list using datatables. Is there sample code available, I seems to have problems connecting to the listname or the listID.

The problem may also be the CAMLViewFields, some of my column names have spaces which I added x00200 to replace the space. Can some help with sample code.

Thank You

kthorngren

Searching the forum for "sharepoint" yields lots of results. This one in particular has a link to a tutorial:
https://datatables.net/forums/discussion/comment/114870/#Comment_114870

I have no idea if the tutorial is accurate. The results seem to have other examples.

Take a look and post if you have questions.

Kevin

JLyon60

If you aren't already using it, you might want to look at using jQuery SPServices (http://sympmarc.github.io/SPServices/) if you're not already doing so. I've been using it to pull data from SharePoint 2010 lists and putting the data into a datatables table. Basically, I used GetListItems to pull what I needed from my list, then saved the data into a JavaScript object that I passed into dataTables. I'll try to provide a modified example later.

The CAML query can often be the long pole in the tent. If your list has been renamed, or if any of the columns you are referencing have been renamed, it can be very frustrating to resolve.

timcadieux

I built myself an api to go between datatables and my SharePoint site...language are us using, i have c# code i can share

EFH52

The SPServices works well, but moving to the REST interface (SharePoint 2013) directly has been fairly easy for me. I'll post what I use here to let you pull at it.

Here is a helper function I have cobbled together to make the building of AJAX calls a bit easier to read down the line.

function getListItemsByListName(arg) { // function tol get SharePoint list loaded for use. Can be used without selction, filter, expansion.
  var listName = arg.listName;
  var selection = arg.select;
  var filter = arg.filter;
  var expansion = arg.expansion;
  var order = arg.order;
  if (selection) { selection='?$select='+selection; } else selection = '?$select=*';
  if (filter) { filter='&$filter='+filter; } else filter = '';
  if (expansion) { expansion='&$expand='+expansion; } else expansion = '';
  if (order) { order='&$orderby='+order; } else order = '';
  return $.ajax({
    url: "/Installations/ENV/_api/web/lists/getByTitle(%27"+listName+"%27)/items"+selection+filter+expansion+order+"&$top=100000",
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" },
  });
}

Here it is in use to simply pull a list via REST and build a table from that list. The list is called EditorTest

getListItemsByListName(
    {
        listName: 'EditorTest',
        select: 'Id,Title,First,Last,FunFact',
        order: 'Id asc'
    }).done( function (data){
        $('#documentsTable').dataTable({
            data: data.d.results,
            autoWidth: false,
            pageLength: 100,
            order: [[1,'desc']],
            columns: [
                {data: '__metadata.etag'},
                {data: 'Id'},
                {data: 'Title'},
                {data: 'First'},
                {data: 'Last'},
                {data: 'FunFact'},
            ]
        });
});

That is the bare bones of getting DataTables to show you a SharePoint List

I can only modify things on the client side. So JS is my tool.

Here is the HTML to support the above JS

<script language="javascript" type="text/javascript" src="EditorTest.js"></script>
    <div>
        <div>
            <h1>Editor Testings</h1>
        </div>
        <table id="documentsTable" class="hover stripe">
            <thead>
                <tr>
                    <th>ETAG</th>
                    <th>ID</th>
                    <th>Title</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>FunFact</th>
                </tr>
            </thead>
        </table>
    </div>

allan

Fantastic information @EFH52 - Thanks for sharing that with us.

Regards,
Allan

rlb5128

I had to a make the following code change to make the expansion work. Thanks for the great starter code. Works like a champ!

if (expansion) {
        expansion = ',' + expansion + '&$expand=' + expansion;
    } else expansion = '';