Display SharePoint list data in jQuery data table using Rest API

In this SharePoint tutorial, we will discuss how to display SharePoint list data in the jQuery data table using Rest API. We can display list data using jQuery data table using Rest API in SharePoint Online or SharePoint 2013/2016. Let us check out the example on display sharepoint list data in jquery data table.

Here I have a SharePoint Online list and we need to display the list data using jQuery datatable using Rest API code.

Display SharePoint list data in jQuery data table using Rest API

Step 1: Here I have created a SharePoint list called “Ticket info” with specific columns.

Populate list items using jQuery datatable and REST API in SharePoint
Populate list items using jQuery datatable and REST API in SharePoint

Step 2: I have added a few items to this list and populated the same in the jQuery data table using REST API.

bind list data to jquery datatable
bind list data to jquery datatable

Step 3: I have created a table using simple HTML code and I have bootstrap for responsive.

<body>

<div class="container">
<div class="row">

            <div class="col-md-12">
            <div class="table-responsive">
                <table id="pDashboard" class="table" cellspacing="0" style="width:100% !important;">
			        <thead>  
			            <tr>
			            	<th></th>
							<th>ID</th>
			             	<th>Ticket No </th> 
			                <th>Ticket Name</th> 
                            <th>Status</th> 
                            <th>Manager Name</th>
                            <th>Assign To</th>                         
			            </tr>  
			        </thead>  
			        <tfoot> </tfoot>  
			    </table>
            </div>        
           </div>
           </div>
</div>
</body>

Step 4: Next we have to use jQuery references before we start the coding. The below references we need to add in this code.

Dowload all js files

<script type="text/javascript" src="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/jquery.dataTables.min.js"></script>
		<script type="text/javascript" src="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/dataTables.bootstrap4.min.js"></script>
		
		<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
		<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>


		<link rel="stylesheet" href="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/bootstrap.css">
		<link rel="stylesheet" href="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/dataTables.bootstrap4.min.css">	
		<link rel="stylesheet" href="https://pikasha12.sharepoint.com/sites/DLH/Documents/Task%20Management/dashboard.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 5: Next we have to call the REST API to get the list data and bind the same in jquery data table in SharePoint.

<script>
$(document).ready(function() {
        loadListItems(); //to load list items
        
});
function loadListItems() {
        var oDataUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TicketInfo')/items?$select=ID,Title,Ticket_x0020_Name,Start_x0020_Date,End_x0020_Date,Status,Project_x0020_Details,TeamMember/Title,Manager_x0020_Name/Title&$expand=TeamMember,Manager_x0020_Name";
        console.log(_spPageContextInfo);
        $.ajax({
                url: oDataUrl,
                type: "GET",
                dataType: "json",
                headers: {
                        "accept": "application/json;odata=verbose"
                },
                success: successFunction,
                error: errorFunction
        });
}
function successFunction(data) {
        try {
                var dataTableExample = $('#pDashboard').DataTable();
                if (dataTableExample != 'undefined') {
                        dataTableExample.destroy();
                }

                dataTableExample = $('#pDashboard').DataTable({
                        //scrollY: "350px",
                        autoWidth: true,
                        dom: 'Blfrtip',
                        "pageLength": 5,
                        buttons: [
                                'copyHtml5',
                                'excelHtml5',
                                'csvHtml5',
                                'pdfHtml5'
                        ],
                        /* order: [
                      [0, 'desc'],
      
                     ],*/
                        columnDefs: [{
                                        "width": "3%",
                                        "targets": [0]
                                }, {
                                        "width": "3%",
                                        "targets": [1]
                                }, {
                                        "width": "8%",
                                        "targets": [2]
                                }, {
                                        "width": "6%",
                                        "targets": [3]
                                }, {
                                        "width": "10%",
                                        "targets": [4]
                                }, {
                                        "width": "10%",
                                        "targets": [5]
                                },
								{
                                        "width": "10%",
                                        "targets": [6]
                                }

                        ],

                        "aaData": data.d.results,
                        "aoColumns": [{
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''
                        }, {
                                "mData": "ID",
                                "render": function(mData, type, row, meta) {
                                        var returnText = "";
                                        var url = _spPageContextInfo.webAbsoluteUrl + "/Lists/TicketInfo/DispForm.aspx?ID=" + mData;
                                        returnText = "<a target='_blank' href=" + url + ">" + mData + "</a>";
                                        return returnText;
                                }

                        },
                            {
                                "mData": "Title"

                        },						{
                                "mData": "Ticket_x0020_Name"

                        }, {
                                "mData": "Status",
                                "render": function(data) {

                                        if (data === null) return "";
                                        else
                                                return "<label class='badge1 badge-" + data + "'>" + data + "</label>"
                                }
                        }, {
                                "mData": "Manager_x0020_Name",
                                "render": function(mData, type, full, meta) {
                                        var returnText = "";
                                        if (mData.Title == undefined) return "";
                                        else return mData.Title;
                                        console.log(mData.Title);
                                }
                        }, {
                                "mData": "TeamMember",
                                "render": function(mData, type, full, meta) {
                                        var returnText = "";
                                        if (mData.Title == undefined) return "";
                                        else return mData.Title;
                                        console.log(mData.Title);
                                }
                        }]

                });


                $('#pDashboard tbody').on('click', 'td.details-control', function() {
                        //alert('H');
                        var tr = $(this).closest('tr');
                        var row = dataTableExample.row(tr);

                        if (row.child.isShown()) {
                                // This row is already open - close it
                                row.child.hide();
                                tr.removeClass('shown');
                        } else {
                                // Open this row
                                row.child(format(row.data())).show();
                                tr.addClass('shown');
                        }
                });


                function format(d) {
                        // `d` is the original data object for the row
                        return '<table cellpadding="5" cellspacing="0" style="margin-left:-12px;width:100%;" border="0">' +
                                '<tr>' +
                                '<td><b>Description:</b></td>' +
                                '<td>' + d.Project_x0020_Details + '</td>' +
                                '</tr>' +                               
                                '<tr>' +
                                '<td colspan="2"><table style="width: 101%;">' +
                                '<td><b>Start Date:</b></td>' +
                                '<td>' + getDates(d.Start_x0020_Date) + '</td>' +
                                '<td><b>End Date:</b></td>' +
                                '<td>' + getDates(d.End_x0020_Date) + '</td>' +
                                '</td></table>'
                        '</tr>' +

                        '</table>';
                }

Step 6: Next copy the same code and paste it inside a script editor web part and net click on OK button to get the O/P of this code. The below is the screenshot of this O/p.

display sharepoint list data in jquery data table
display sharepoint list data in jquery data table

Step 7: Here I have added a plus and minus icon to see the more details of a specific item. Please look into the screenshot below.

jquery datatables sharepoint rest api
jquery datatables sharepoint rest api

Step 8: I have added a few advanced features to save the table data as a PDF or Excel format. If you click on the button.

display sharepoint list data in html table using javascript
display sharepoint list data in html table using javascript

Step 9: We can also easily search the Item in the search text box and show full item instead of paging. The below image is my full O/P of this code.

jquery datatable in sharepoint online
jquery datatable in sharepoint online

DataTables Plug-in

DataTables is a plug-in build on top of jQuery to enhance any HTML table with its own advanced features. Without writing any code, you can enhance your HTML tables like you can have paging, search, formating, etc.

To work the DataTables JavaScript library or plug-in, you just require to refer the following .css and .js file.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

If you do not want to provide the path from the CDN, you can also download and save it in your site and refer it from there.

Display SharePoint list data in jquery data table

Now, we will see how to get all list items in sharepoint using rest api and then display sharepoint list data in jquery data table.

Here, I have a SharePoint Online list which has few columns like:

  • Title
  • Gender
  • ContactNumber
  • Department
  • Address

And the SharePoint list looks like below:

display sharepoint list data in jquery data table
Display SharePoint List items in a data table using Rest API

Now, we will see how to display these SharePoint list items in a data table using Rest API, HTML, jQuery, etc in a web part page in SharePoint.

Here I will use a content editor web part to add the code into the web part page in SharePoint. So here, I have added two separated file, one is the HTML file which contents the HTML code and the other one is a js file which contains our JavaScript and Rest API code.

Both the files I have uploaded to the SiteAssets library in the SharePoint Online site.

HTML Code:

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/SharePointSky/SiteAssets/RetriveListItemsRestAPI.js"></script>

<!–External js file to get data from SharePoint List –>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
</head>
<body>
<div>

<table id="Employee" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>EmpName</th>
<th>Gender</th>
<th>ContactNumber</th>
<th>Department</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

RetriveListItemsRestAPI.js Code

$(document).ready(function() {
GetItems();
});

function GetItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('MyCompanyEmployeeList')/items?$select=Title,Gender,ContactNumber,Department,Address";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: OnSuccess,
error: OnFailure
});
}

function OnSuccess(data) {
try {
$('#Employee').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Gender"
},
{
"mData": "ContactNumber"
},
{
"mData": "Department"
},
{
"mData": "Address"
}
]
});
} catch (e) {
alert(e.message);
}
}

function OnFailure(data, errMessage) {
alert("Error: " + errMessage);
}

Then add a content editor web part to the web part page and give the HTML file reference like below:

display list items in datatable using rest api sharepoint
display sharepoint list data in jquery data table

Once you save the page, you can see the list data will appear in the datatable like below:

display sharepoint list data in jquery data table
display sharepoint list data in jquery data table

Display SharePoint List Items using DataTables Plug-in (Script editor web part)

If you are familiar with the script editor web part, then you can add a script editor web part in the SharePoint web part page. Then add the below code in the script editor web part.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<!–External js file to get data from SharePoint List –>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">

<div>
<table id="Employee" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>EmpName</th>
<th>Gender</th>
<th>ContactNumber</th>
<th>Department</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>

<script>
$(document).ready(function() {
GetItems();
});

function GetItems() {
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeesList')/items?$select=Title,Gender,ContactNumber,Department,Address";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: OnSuccess,
error: OnFailure
});
}

function OnSuccess(data) {
try {
$('#Employee').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Gender"
},
{
"mData": "ContactNumber"
},
{
"mData": "Department"
},
{
"mData": "Address"
}
]
});
} catch (e) {
alert(e.message);
}
}

function OnFailure(data, errMessage) {
alert("Error: " + errMessage);
}
</script>

The result will come like below:

display sharepoint list data in jquery data table
display sharepoint list data in jquery data table

This is how to display sharepoint list data in jquery data table.

Display sharepoint list data in html table using jquery

Let us see how to display sharepoint list data in html table using jquery.

Here I explained, how to populate SharePoint Task list data in a table using SharePoint REST API and filter by status column in SharePoint Online/2013/2016. Here we will use jQuery, Bootstrap, moment JS with Rest API code in SharePoint.

Step-1: Here I have created a SharePoint list and add the columns that same as the below list. Here Ticket no is a calculated column and Ticket_no: OrderName is a lookup column for other lists.

display sharepoint task list data in html table using jquery
display sharepoint task list data in html table using jquery

Step-2: Go to the SharePoint page and create a new .aspx page (Web part page).

Step-3: Edit the page and Add a script editor Web Part in SharePoint web part page.

Step-4: Add the jQuery, Bootstrap, moment JS and export to excel libraries in your code.

Step-5: Add the below code in your page.

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">


<style>
body {
    padding: 15px;
}

table {
    border-collapse: separate;
    border-spacing: 0 5px;
}

thead th {
    background-color: #006DCC;
    color: white;
}

tbody td {
    background-color: #EEEEEE;
}

tr td:first-child,
tr th:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.input-group { 
    padding-bottom: 100px;
}
.row1 {
    margin-top: 15px;
}
</style>
				
	<script type="text/javascript">
    jQuery(document).ready(function () {
        var testdata = [];
        var html = "";
        var taskstatus = "";
		loadMyItems();
		$("#getMonthData").click(function(){
			    $('#tlbtaskDetails').find('tbody').empty();
				
				loadMyItems();				
			});
			$("#getExcelData").click(function(){

			$("#tlbtaskDetails").table2excel({

				// exclude CSS class                 
				name: "Facility Work Order Report",
	    		filename: "Completed Task Report" //do not include extension

            });			
            });
		});
		function loadMyItems() 
		{
		var SearchDate=document.getElementById('startMonth').value;

			siteUrl = _spPageContextInfo.siteAbsoluteUrl ; 
			if(SearchDate == 'undefined' || SearchDate == '' || SearchDate == undefined )
			{
				var RestUrl = siteUrl + "/_api/web/lists/GetByTitle('Assign Task')/items?$select=Ticket_no/WorkOrderNo,Ticket_no/Created,Ticket_no/OrderName,AssignedTo/Title,StartDate,Completed_x0020_Date,Duration,Status&$expand=Ticket_no/WorkOrderNo,Ticket_no/OrderName,AssignedTo/Id&$filter=Status eq 'Completed' ";   
			}
			else
			{
				var RestUrl = siteUrl +"/_api/web/lists/GetByTitle('Assign Task')/items?$select=Ticket_no/WorkOrderNo,Ticket_no/Created,Ticket_no/OrderName,AssignedTo/Title,StartDate,Completed_x0020_Date,Duration,Status&$expand=Ticket_no/WorkOrderNo,Ticket_no/OrderName,AssignedTo/Id&$filter=(M_Y eq '"+SearchDate+"') and (Status eq 'Completed')";   

			}
        jQuery.ajax({
            url:RestUrl,
            type: "GET",     
            headers: { "Accept": "application/json;odata=verbose" },
            success: function (data) {
                 var html = "";
                 html += "<tbody>";
                    
                jQuery.each(data.d.results, function (index, value) {
				var startDate = value.StartDate;
                startDate = new Date(startDate).toUTCString();
                startDate = startDate.split(' ').slice(0, 4).join(' ');
				
				var EndDate = value.Completed_x0020_Date;
                EndDate = new Date(EndDate).toUTCString();
                EndDate = EndDate.split(' ').slice(0, 4).join(' ');
				
				var IssuedDate = value.Ticket_no.Created;
                IssuedDate = new Date(IssuedDate).toUTCString();
                IssuedDate = IssuedDate.split(' ').slice(0, 4).join(' ');
		
               var AssigUser="";
                var days=value.Duration;
				var time = days.slice(0, 5);    
                  jQuery.each(value.AssignedTo.results, function (i, Uservalue) {
		if(value.AssignedTo.results.length == 1)
		{
		AssigUser+=Uservalue.Title;
			}
			else
			{
		if(value.AssignedTo.results.length==i & value.AssignedTo.results.length >1)
		{
		AssigUser+=Uservalue.Title;
		}
		else
		{
		AssigUser+=Uservalue.Title+",";
		}
		}		
		})
                html += "<tr><td>" + value.Ticket_no.WorkOrderNo + "</td><td>" + value.Ticket_no.OrderName + "</td><td>" + IssuedDate + "</td><td>" + AssigUser + "</td><td>" + startDate+ "</td><td>" + EndDate + "</td><td>" + time +" hours"  + "</td><td>" + value.Status + "</td></tr>"
                   
                });
                 html += "</tbody>";
                 $('#tlbtaskDetails').append(html);                

            },
            error: function (data) {
                //output error HERE
                alert(data.statusText);
            }
        });		
	}
	$(function() {
    $('#startMonth').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM-yy',
        onClose: function(dateText, inst) { 
            $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
        }
    });
});	
</script>

 <div class="container">
 <div class="row">
<div class="col-sm-3">
 <input type="text" class="form-control" id="startMonth" placeholder="Choose a Month" >
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-success btn-md btn3d" id="getMonthData"><span class="glyphicon glyphicon-ok"></span> Show</button>
</div>
<div class="row">
<div class="col-sm-2">
<button type="button" class="btn btn-danger clearfix" id="getExcelData"><span class="fa fa-file-excel-o"></span> Export to Excel</button>
</div>
</div>
<div class="row1">
               
         
                            <table class="table" id="tlbtaskDetails">
                                <thead class="black white-text">
                                    <tr>
                                        <th scope="col">Ticket No</th>
										<th scope="col">Task Name</th>
										<th scope="col">Task Issued Date</th>
                                        <th scope="col">Assigned User</th>
                                        <th scope="col">Task Start Date</th>
                                        <th scope="col">End Date</th>
                                        <th scope="col">Total Hours</th>
                                        <th scope="col">Status</th>

                                    </tr>
                                </thead>
                            </table>
                        </div>
						
</div>

Step-6: Next, you will get the SharePoint list data output in a tabular format.

display sharepoint task list data in html table using jquery
display sharepoint task list data in html table using jquery

Step-7: You can also filter the item based on month which you have to provide in the above text box.

display sharepoint list data in html table using jquery
display sharepoint list data in html table using jquery

Step-8: Here you can export this list data to excel by clicking the above button.

sharepoint 2013 rest api javascript example
sharepoint 2013 rest api javascript example

Step-9: You will get the exported file like this.

display sharepoint list data in html table using jquery
display sharepoint list data in html table using jquery

Step-10: This is the whole functionality of this article.

Note: You can update the jQuery references, if are facing any issues while executing this code.

This is how to display sharepoint list data in html table using jquery.

You may like the following SharePoint Rest API tutorials:

Hope this SharePoint tutorial explains how to display SharePoint list data in jQuery data table using Rest API in SharePoint Online or SharePoint 2013/2016/2019 and hope you like the display sharepoint list data in jquery data table example.

    • Hey Ryan,
      Can you check in the console, if any script error is there? You can check in Google Chrome -> more tools -> Developer tools and then in the console tab.

    • Yes. Check the console .. This is a tested code and It was working fine. Please add all reference file properly and try .

      • Hi Rajkiran, I have same issue, I see only the banner but nothing else work, I have tried everything, even recreate list with column ID but nothing, any suggestion? Thank you

        • Hi ron,
          Could you please share me the screenshot of your console so that I can able to recognize the exact issue.I couldn’t suggest anything without knowing the exact issue of your code.

  • Hi Raj, I have followed all the steps but I don’t see its working, I see the titles but that is it. I have tried “Retrieve and Display TASK status using REST API in SharePoint” which using the same js/css files and it worked perfectly with same list but when I tried to work on the above; it does not work. I am not JavaScript expert and don’t know what am I doing wrong? Thank you

  • Hi Raj, just want to Thank you because it worked because I was missing column “TeamMember” as soon as I added that column; it worked. Only question I have that how you added the plus and minus in the list? Again, thank you so much!
    Imran

  • Where i should add a TeamMember column?

    -1, Microsoft.SharePoint.SPException

    The “TeamMember” field or property does not exist.

  • Excellent post, but only issue is with font awesome icons, they don’t show up, should I be using different reference files? Please help.

    • No need to add reference here. Yiu can also download both icons like plus and minus …and keep it in your library and refer the same link in your code .

  • Hello Guys,
    If anyone is facing issue to showing Plus and Minus icon,Please download all references file and go to the Dashboard.css and modify the URL .
    Download both plus and Minus icon from internet and keep it in you SharePoint library , next open the dashboard.css and modify the URL in below section.

    td.details-control {
    background: url(‘/sites/DLH/Documents/Task%20Management/details_open.png’) no-repeat center center;
    cursor: pointer;
    }
    tr.shown td.details-control {
    background: url(‘/sites/DLH/Documents/Task%20Management/details_close.png’) no-repeat center center;
    }

  • Hi Friends, Swain… could you do a video for your code, or also it’s possible to made with spx? I trying to learn it

  • Hi, I am getting an “Unspecified error” and an “Accessing the ‘caller’ property of a function or arguments object is not allowed in strict mode” script error. The top of my table is showing and says no data available in the table below it.
    These errors came about as I was debugging other parts such as the fact that there is no catch method or errorFunction in your example code. To fix it I created an errorFunction with an alert and took out the try on the successFunction.
    I wish I could post a screenshot on here but it does not allow me to. Any guidance would be great. Thanks.

  • I really love this and am trying to implement but wondering how to set the child table in the same format as the parent. Instead of the “field: detail” format, it’s in the DataTables format. I’m trying RowGroup at the moment but it’s not as fancy.

  • Hi can you help me I want to make the DT to initial load the rows on who Author/Created by the form. Thank you in advance.

  • Do you have the code for the same to get the items from a list which contains more than 10k records and binding in a jquery data table and filtering with year from a dropdown(list contains a ‘date of occurence’ column)

  • >