SharePoint Knockout js :- Get items from SharePoint List using Knockout js

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

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

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/knockout-3.3.0.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/ko.sp-1.0.min.js"></script>   

<script type="text/javascript"> 
function altRows(id){
if(document.getElementsByTagName){  

var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr"); 
 
for(i = 0; i < rows.length; i++){          
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}      
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>  

<script>   
   
    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");   
    var completeEmployeeList = null;   
   
     
    function EmployeeList(title, firstname, lastname, location) {   
        var self = this;   
        self.Title = title;   
        self.FirstName = firstname;   
        self.LastName = lastname; 
        self.Location = location;   
    }   
       
    
    function EmployeeListViewModel() {   
        var self = this;   
       
        self.Employees = ko.observableArray([]);   
        self.AddEmployees = function (title, firstname, lastname, location) {   
            self.Employees.push(new EmployeeList(title, firstname, lastname, location));   
        }   
    }   
   
    function MainFunction() {   
        completeEmployeeList = new EmployeeListViewModel();             
        retrieveListItems();               
        ko.applyBindings(completeEmployeeList);   
    }   
   
    function retrieveListItems() {   
        var clientContext = new SP.ClientContext.get_current();   
        var oList = clientContext.get_web().get_lists().getByTitle('Emp');   
        var camlQuery = new SP.CamlQuery();   
        camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");   
        this.collListItem = oList.getItems(camlQuery);   
        clientContext.load(collListItem);   
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));   
    }   
   
    function onQuerySucceeded(sender, args) {   
        var listItemInfo = '';   
        var listItemEnumerator = collListItem.getEnumerator();   
        while (listItemEnumerator.moveNext()) {   
            var currentItem = listItemEnumerator.get_current();   
            completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FirstName"), currentItem.get_item("LastName"), currentItem.get_item("Location"));   
        }   
    }   
   
    function onQueryFailed(sender, args) {   
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());   
    }   
</script>   
   

<div id="divEmployeeList">   
   
    <h2>SharePoint with Knockout js Example</h2>   
    <br />   
   
  <table class="altrowstable" id="alternatecolor">
        <thead>   
            <tr>   
                <th>Title</th>   
                <th>FirstName</th>    
                <th>LastName</th>    
                <th>Location</th>   
            </tr>   
        </thead>   
        
        <tbody data-bind="foreach: Employees">   
            <tr>   
                <td data-bind="text: Title"></td>   
                <td data-bind="text: FirstName"></td> 
                <td data-bind="text: LastName"></td>    
                <td data-bind="text: Location"></td>   
            </tr>   
        </tbody>   
    </table>   

</div>  

output:- 

    

Continue Reading...

get sharepoint list items using rest api

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>

<style>

<style type="text/css">
.EmpTable { background-color:#FFFFE0;border-collapse:collapse;color:#000;font-size:18px; }
.EmpTable th { background-color:#BDB76B;color:white;width:32%; }
.EmpTable td, .EmpTable th { padding:5px;border:0; }
.EmpTable td { border-bottom:1px dotted #BDB76B; }

</style>


<script type="text/javascript">

$(document).ready(function() {
    

$.getJSON("https://Site Collection Url/sites/TestSite/_vti_bin/ListData.svc/Emp?$select=Id,Title,FirstName,LastName",function(data) {     

           
            var datarows = [];       
  

$.each(data.d.results, function(i,result) {

 var Title = result.Title;
 var  Id = result.Id;
 var  FirstName = result.FirstName;
 var  LastName = result.LastName;

datarows.push({Id: Id, Title: Title,FirstName: FirstName,LastName: LastName}); 


                                  
               
});

   var sFullHtml = '';
   
     sFullHtml += '<table id="TblEmpInfo" class="EmpTable" >';
sFullHtml += ' <tr >';
sFullHtml += ' <th>First Name</th>';
sFullHtml += ' <th>Last Name</th>';
sFullHtml += ' <th>Id</th>';
sFullHtml += ' </tr>';

   for (var arrayIndex in datarows) {      
       var FirstName=datarows[arrayIndex].FirstName;
       var LastName=datarows[arrayIndex].LastName;
        var Id=datarows[arrayIndex].Id;
        
sFullHtml += '<tr>';
    sFullHtml += '<td align="left" valign="top">'+ FirstName +'</td>';
sFullHtml += '<td align="left" valign="top">'+ LastName +'</td>';
sFullHtml += '<td align="left" valign="top">'+ Id +'</td>';
sFullHtml += '</tr>';

         }  
 
 sFullHtml += '</table>';

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

});
});




</script>

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

</div>


output:- 

Continue Reading...

get item from sharepoint list using spservices

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:-

Continue Reading...