CRUD Operations Using SPServices (Read Operation)

SPServices is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful capabilities. It works entirely client side and requires no server install. SPServices can be used with SharePoint 2007, 2010, and 2013, whether on premises or hosted with Office365 or others. SPServices is primarily hosted on Codeplex, with this repository mirroring most of the downloads there. With Codeplex shutting down, any new activity will happen on the NEW Github-backed site. Check out the newer location (http://sympmarc.github.io/SPServices/) for SPServices information on Github pages. We can perform Create, Read, Update, Delete operations easily using SPServices. Let us go through one by one.

Basic Preparations

List Creation

We have created a custom list name "EmployeeMaster" in Sharepoint having Columns "Title", "First Name", "Last Name", "Employee ID", "Date of Joining".

Now on page we have added references of jquery and spservices files.

<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.SPServices-2014.02.min.js"></script>

Now start to perform CRUD operations one by one.
1. READ (Get records from list and display on page.)
Initially, we will try to get all records from the list. For this, below is the code snippet.

<script type="text/javascript">
 $(document).ready(function()
 {
  $().SPServices(
  {
   operation: "GetListItems",
   webURL: $(this).attr('location').origin,
   async: false,
   listName: "EmployeeMaster",
   completefunc: function (xData, Status)
   {
    if(Status == 'success')
    {
     var vrTableHTML = '';

     vrTableHTML += '<thead>' + 
          '<th>' + 'First Name' + '</th>' + 
          '<th>' + 'Last Name' + '</th>' + 
          '<th>' + 'Employee ID' + '</th>' + 
          '<th>' + 'Date Of Joining' + '</th>' + 
         '</thead>';

     vrTableHTML += '<tbody>';
     $(xData.responseXML).SPFilterNode("z:row").each(function()
     {
      vrTableHTML += '<tr>' + 
           '<td>' + $(this).attr("ows_First_x0020_Name") + '</td>' + 
           '<td>' + $(this).attr("ows_Last_x0020_Name") + '</td>' + 
           '<td>' + $(this).attr("ows_Employee_x0020_ID") + '</td>' + 
           '<td>' + ($(this).attr("ows_Date_x0020_Of_x0020_Joining")).split(' ')[0] + '</td>' + 
          '</tr>';
     });
     vrTableHTML += '</tbody>';
     $('#tblResult').html(vrTableHTML);
    }
    else
    {
    }
   }
  });
 });
</script>

Lastly, add html part.

<div id="dvResult">
 <table id="tblResult">
 </table>
</div>

Now open the page in browser. If everything goes fine, we will get result as below-

Note:- In you want to apply filter conditions or want to get specific fields then the same can be achieved using below code-

   CAMLQuery: "<Query>" +
       "<Where>" +
        "<Gt>" +
         "<FieldRef Name=\"Date_x0020_Of_x0020_Joining\" />" +
         "<Value IncludeTimeValue=\"TRUE\" Type=\"DateTime\">2014-01-01</Value>" +
        "</Gt>" +
       "</Where>" +
      "</Query>",
   CAMLViewFields: "<ViewFields>" +
        "<FieldRef Name=\"Employee_x0020_ID\" />" +
        "<FieldRef Name=\"First_x0020_Name\" />" +
        "<FieldRef Name=\"Last_x0020_Name\" />" +
        "<FieldRef Name=\"Date_x0020_Of_x0020_Joining\" />" +
       "</ViewFields>",

The result would be-

Important:-
In this article, we have used "webURL: $(this).attr('location').origin," while calling SPServices. In some post over the internet, you may find "webURL: '/'," instead of same OR this line would be missing in some posts. The main objective of this line is to define the base URL of site. The best way is to mention this line as sometimes, the application itself not picks the base URL (as in my case - may be some Admin level issues).