Show List Data in HTML table in Content Editor Web Part using JavaScript and jQuery

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.

Author: Akanksha Gupta

I am a developer and working on SharePoint and Project Server in an MNC. I have more than 10 years of experience in the same field.

One thought on “Show List Data in HTML table in Content Editor Web Part using JavaScript and jQuery”

Leave a comment

Power Platform Academy

Start or Upgrade your Career with Power Platform

Learn with Akanksha

Python | Azure | AI/ML | OpenAI | MLOps