CODEWITHSUNDEEP
sharepoint
user2182985
user2182985

Reputation: 11

Display sharepoint list data to dynamic html table using jQuery

I am having a scenario where i need to get the list data to be shown in dynamic html table using jQuery to display in site with content editor webpart. Please help me out with this regards thanks in advance...

Upvotes: 0

Views: 9150

Answers (2)

Manu Singh
Manu Singh

Reputation: 414

You can use SharePoint Client Context REST API to get the data and display it in a table. Add reference to these three scripts:
1. /_layouts/15/SP.Runtime.js
2./_layouts/15/SP.js
3. //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
And use below example: 

<script type="text/javascript">

    $(document).ready(function () {
        fnGetData();
    });
    function fnGetData() {
        context = new SP.ClientContext.get_current();
        web = context.get_web();
        var list = web.get_lists().getByTitle('Users');
        var myquery = new SP.CamlQuery();
        myquery.set_viewXml("<View><Query>" +
                       "<Where>" +
                        "<IsNotNull>" +
    "<FieldRef Name='Title' />" +
    "</IsNotNull>" +
   "</Where>" +
                              "</Query></View>");
        myquery.set_datesInUtc(false);
        myItems = list.getItems(myquery);
        context.load(myItems);
        context.executeQueryAsync(Function.createDelegate(this, function () { fnGetDataSuccess(); }), Function.createDelegate(this, this.fnGetDataFailed));
    }
    function fnGetDataSuccess() {
        var txtHTML = "";
        var ListEnumeratorAcc = this.myItems.getEnumerator();
        while (ListEnumeratorAcc.moveNext()) {
            var currentItem = ListEnumeratorAcc.get_current();
            txtHTML = txtHTML + "<tr>";
            txtHTML = txtHTML + "<td>";
            if (currentItem.get_item('Title') != null) {
                txtHTML = txtHTML + currentItem.get_item('Title');
            }
            txtHTML = txtHTML + "</td>";


            txtHTML = txtHTML + "<td>";
            if (currentItem.get_item('Owner') != null) {
                txtHTML = txtHTML + currentItem.get_item('Owner').get_lookupValue();
            }
            txtHTML = txtHTML + "</td>";
            txtHTML = txtHTML + "</tr>";
        }
        $("#tblCustomListData").append(txtHTML);

    }
    function fnGetDataFailed(sender, args) {
        alert("Error Message:\n" + "URL: " + sender.get_url() + ". \n\Error Description:" + args.get_message());
    }
</script>
<table id="tblCustomListData" border="1">
    <thead>
        <tr>
            <th>Title
            </th>
            <th>Owner
            </th>
        </tr>
    </thead>
</table>

Upvotes: 2

AymKdn
AymKdn

Reputation: 3927

You can either use SharepointPlus or SPServices to retrieve the list data. Then it's easy to use jQuery to insert the data into the HTML page.

Upvotes: 0

Related Questions