Display SharePoint List Items using ECMA Script - Client Object Model

Display SharePoint List Items using ECMA Script

In this blog, I will explain, how to get list items using ECMA Script.
ECMA script is a client side way to work with SharePoint object.

Create a web part page in page library. Add a content editor web part on that page.
In content editor webpart write below code:



  <link href="/Style%20Library/table.css" rel="stylesheet" type="text/css" />
    <script src="/_layouts/SP.js" type="text/ecmascript" temp_src="/_layouts/SP.js"></script>
    <script type="text/javascript">

        function ShowItem() {
            var table = document.getElementById("empTable");
            while (table.rows.length > 1) {
                table.deleteRow(1);
            }
            var context = new SP.ClientContext.get_current();
            var web = context.get_web();
            var list = web.get_lists().getByTitle('EmployeeList');
            var query = SP.CamlQuery.createAllItemsQuery();
            allItems = list.getItems(query);
            context.load(allItems, 'Include(Title,Department,City)');
            context.executeQueryAsync(Function.createDelegate(this, this.success),
    Function.createDelegate(this, this.failed));
        }
        function success() {
            var TextFiled = "";
            var ListEnumerator = this.allItems.getEnumerator();
            while (ListEnumerator.moveNext()) {
                var currentItem = ListEnumerator.get_current();
                var table = document.getElementById("empTable");
                var row = table.insertRow(1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                cell1.innerHTML = currentItem.get_item('Title');
                cell2.innerHTML = currentItem.get_item('Department');
                cell3.innerHTML = currentItem.get_item('City');
            }
        }
        function failed(sender, args) {
            alert("failed. Message:" + args.get_message());
        }</script>
    <table class="CSS_Table_Example" id="empTable">
        <tbody>
            <tr>
                <th>Title </th>
                <th>Department </th>
                <th>City</th>
            </tr>
        </tbody>
    </table>

    <a onclick="Javascript:ShowItem();" href="#">Display List Data</a>

Output:


ECMA Script, Client Side Object Model SharePoint 2010

Comments

Popular

C# 6.0 New Features

SharePoint Interview Questions and Answers

Calling ASP.Net WebMethod using jQuery AJAX

What is Cloud Computing - A guide for beginners