Use jQuery Datatables for SharePoint List Webpart with export to CSV, EXCEL, PDF and Print features

Dec 01
Use jQuery Datatables for SharePoint List Webpart with export to CSV, EXCEL, PDF and Print features

​In this post, i will describe how you can use jQuery Datatables to add more features to SharePoint list web part.

For this you need jQuery library (i prefer to use latest version of jQuery library), download here and jQuery Datatables library that you can download here. Also download jQuery Datatable TableTools extension from same download page. Once you have the required libraries, upload these to a SharePoint Document library, it will be easier to refer these libraries in SharePoint context.

Now add a content editor webpart on the page where you want to implement this, and paste below script in that web part. Make sure to update library/css refrences as per the location from your sharepoint site.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.dataTables.css">
<script type="text/javascript" src="dataTables.tableTools.js"></script>
<link type="text/css" rel="stylesheet" href="dataTables.tableTools.css">
<script type="text/javascript">
       $(".ms-listviewtable").prepend($("<thead></thead>").append($('.ms-listviewtable').find("tr:first"))).DataTable({         "sDom": 'T<"clear">lfrtip',
    "tableTools": {            
    "sSwfPath": "copy_csv_xls_pdf.swf"   // Change this path according to file location    

Add below style also to that web part to maintain sharepoint css or else datatable css will be applied changing look n feel.
<style type="text/css">
.even, .odd, .sorting_1{
    background-color: transparent !important;
 .dataTable THEAD TH{
    border:0 !important;

Below is the screenshot of how it will look after performing above steps-

1.) Use Copy button to copy list content to clipboard for further use.
2.) Use CSV or Excel or PDF button to export content in desired format.
3.) Use Print button to view the print preview of list content and then using browser print options, print content.
4.) Use Search textbox to filter content basd on keyboard- while typing filter the results.

Note:- To make table tools working flash should be enabled in browser and sharepoint should allow .swf files.