jQuery datatable with SpServices data on a SharePoint page

Recently, I’ve been envolved in building a grid-driven table, with data from a SharePoint list. I found a great solution, datatables.net, which is a plug-in for the jQuery javascript library. It is a flexible tool, with automatic pagination and adjustable with some extensions such as column reorder, column visibility (gives the end user the ability to change the columns’ visibility), and more.. It is easy to use in html pages and I’ll explain below how to use it (together with SpServices) on a SharePoint page.

At first, you’ll have to include some files on the page, references to libraries and CSS files.
You can link to an online file (such as below) or download the files and include them in your site (site assets).
I did both. To include files to your site, I found this article very helpful.
I included a code editor webpart on my page, edited it and inserted following code in the snippet:

The jQuery library

The datatable CSS (found on datatables.net)

The datatable jQuery (found on datatables.net)

I used the column reorder extension in my project, which I had to include following file for:
The datatable column reorder jQuery (found on datatables.net)

I wanted to show SharePoint list data in my datatable, for which I used SPServices.

First, get the data from the list, in this case, it was named ‘Files’.
You can adjust the query (myQuery) following your needs, if you want to filter the results already.
I queried everything from my list and ordered it by ‘created on’.
To adjust:

  • webURL
  • listName
  • I showed 4 columns (Title, Filename, Filetype, Team). You can, of course, add more according your needs.
    Just add ‘ ” + $(this).attr(“ows_Filename”) + “

    ‘ and adjust the name.
    The “dom”: ‘Rlfrtip’ code makes sure the column reorder is initiated (see datatables.net).

    Just add the HTML code for the table and you’re good to go.

    Complete code:

    Leave a Reply