In this post I’ll show you the quick steps how to extend the Data View Web Part (DVWP) with help of a jQuery plugin named DataTables.
The DVWP can connect to a SharePoint list and you can use it for example to display content in tabular view from a SharePoint list. Let’s say you want to create a news rollup that reads from the pages library with some special styling and condition, the DVWP is one of the options for this task. There’s a lot you can do with only XSLT, HTML and CSS but sometimes you need to add jQuery for some specific functions.

In this example I’ll show how to extend a basic DVWP news rollup with search-as-you type, sort function and pagination.

In order for jQuery DataTables to be able to function correctly, the HTML for the dataview table must be laid out in a well formed manner with the ‘thead’ and ‘tbody’ sections declared. Remember that use filters and limit number of object by server side in the DVWP especially if you’re dealing with large data sets, the datatable.js is there to serve a user friendly presentation layer.

The steps

  1. Create the DVWP
  2. Add the HTML that’s needed for the datatable plugin
  3. Add jQuery and CSS in separate files and reference this from your custom master page

jQuery
What you need for the plugin:

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sInfo": "_START_ - _END_ of _TOTAL_ pages",
"sSearch": "Search:",
"sZeroRecords": "",
"sInfoEmpty": "No results..",
"sInfoFiltered": "",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sNext": ">",
"sPrevious": "<"
}},
"sPaginationType": "full_numbers",
"iDisplayLength": 4,
"bLengthChange": false
});
var oTable = $('#example').dataTable();
oTable.fnSort([[0,'desc']]);
});

References
The references in your master page should looks like this:

<SharePoint:CssRegistration name="/Style Library/DVWP/Styles/MSDN.css" After="corev4.css" runat="server"/>
<script type="text/javascript" src="/Style Library/DVWP/Scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/Style Library/DVWP/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="/Style Library/DVWP/Scripts/addOns.js"></script>

Download
Download the aspx including the DVWP, jQuery and CSS taken from this example. The news pages in this example have the path /press/nyheter/ and the page library is named Sidor. Change the name and URL in the DVWP as you prefer as well as the select query. Do also download the DataTable plugin here.

I like the DVWP, it’s easy to work with and there’s a lot of ways to extend it, however this plugin works great with REST, librarys such as SPServices or in custom code. You can even use it in a custom format (template) for Content Query Web Part as well, maybe I’ll write a post about how to do this later on.

This technique works great in SharePoint 2007, 2010 and 2013, in foundation or server, online or OnPrem.

/ Christian

Advertisements