Open your SharePoint Site Collection.
Edit your SharePoint Page.
Add a Content Editor Web Part.
Click on Edit Source on the ribbon and paste the below code in that.
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"> </script> <script type="text/javascript" src="/sites/DemoSC/SitePages/_layouts/15/sp.runtime.js"> </script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script type="text/javascript"> $(function () { getData(); }); function getData() { var context = new SP.ClientContext.get_current(); var list = context.get_web().get_lists().getByTitle('Employees'); var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml( '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + '<Rowlimit>10</Rowlimit></View>'); this.itemColl = list.getItems(camlQuery); context.load(this.itemColl); context.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); } function onQuerySucceeded(sender, args) { var listEnumerator = this.itemColl.getEnumerator(); var listItem = '<thead>' + '<tr>' + '<th>First Name</th>' + '<th>Last Name</th>' + '</tr>' + '<thead>'; listItem += '<tbody>'; while (listEnumerator.moveNext()) { var currentItem = listEnumerator.get_current(); listItem += '<tr>' + '<td>' + currentItem.get_item('FirstName') + '</td>' + '<td>' + currentItem.get_item('LastName') + '</td>' + '</tr>'; } listItem += '</tbody>'; $('#employees').html(listItem); } function onQueryFailed(sender, args) { alert('Request Failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } </script> <table id="employees" style="width:100%"> </table>
Save the Page.
One thought on “Show List Data in HTML table in Content Editor Web Part using JavaScript and jQuery”