get item from sharepoint list using spservices

By: Unknown on 08:13

Share it Please

Tweet

1.Create a Custom List Name as "Emp" and Create a below Column Name

  FirstName - Single Line Text
  LastName-Single Line Text
  Location-Single Line Text

2.Create one Content Editor WebPart and  paste the below code
 

<script type="text/javascript" src="https://Site Collection Url/sites/TestSite/Style Library/Samples/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="https://Site Collection Url/sites/TestSite/Style Library/Samples/jquery.SPServices-2014.02.min.js"></script>

<script type="text/javascript" src="https://Site Collection Url/sites/TestSite/Style%20Library/Samples/jquery.dataTables.min.js"></script>

<style>

<style type="text/css">

.myOtherTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }

.myOtherTable th { background-color:#BDB76B;color:white;width:32%; }

.myOtherTable td, .myOtherTable th { padding:5px;border:0; }

.myOtherTable td { border-bottom:1px dotted #BDB76B; }

</style>

<script type="text/javascript">

$(document).ready(function() {

 EmpDataBind();

  

});

var sFullHtml = '';

                                     

             function EmpDataBind() {

                                                        

       

    sFullHtml += '<table id="TblEmpInfo" class="myOtherTable" >';

sFullHtml += ' <tr >';

sFullHtml += ' <th>First Name</th>';

sFullHtml += ' <th>Last Name</th>';

sFullHtml += ' <th>Location</th>';

sFullHtml += ' </tr>';

     

             

try

                            {

                           

                             $().SPServices({

                            

operation: "GetListItems",

async: false,

  listName: "Emp",

            CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' Ascending='True'/></OrderBy></Query>",

            CAMLViewFields: "<ViewFields><FieldRef Name='Title'/><FieldRef Name='FirstName'/><FieldRef Name='LastName'/><FieldRef Name = 'Location'/></ViewFields>",  

                    

  completefunc: function (xData, Status) {

    

       $(xData.responseXML).SPFilterNode("z:row").each(function() {

       

          var Title = ($(this).attr("ows_Title"));

         

          var FirstName = ($(this).attr("ows_FirstName"));

         

          var LastName = ($(this).attr("ows_LastName"));

      

          var Location = ($(this).attr("ows_Location"));

       

sFullHtml += '<tr>';

                    sFullHtml += '<td align="left" valign="top">'+ FirstName +'</td>';

                    sFullHtml += '<td align="left" valign="top">'+ LastName  +'</td>';

                    sFullHtml += '<td align="left" valign="top">'+ Location  +'</td>';

sFullHtml += '</tr>';

       

});

   }        

});

}catch(err){}

sFullHtml += '</table>';

  $(".EmpInfo").html(sFullHtml);

        }

        function OnLoadFailed(sender, args) {

       

            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

        }

       

</script>

<div class="EmpInfo" style="margin-top:10px;">

</div>

output:-