Change Look for SharePoint List using Datatable JS

Here I am showing you to change the look of SharePoint list view using datatabse js and SharePoint JS link. If your SharePoint list having more items than performance will be quite slow, but still manageable.

So, here are the steps:

    • Create a view in your target SharePoint List. If you want “Edit” button on view then add “Edit (link to edit item)” field to that view.
    • Now edit the view Page and add script editor web part to the header of the page and add below references to script editor.
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    • Now edit the List view web part > Navigate to open web part properties > expand “Miscellaneous” and under JSLink > set your file URL as below. In my case, I kept the file under SiteAssets. Download source code from GitHub
~sitecollection/SiteAssets/dataTablesListView.js

Your output will be like this.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s