Thursday, April 5, 2018

REST API Call To SharePoint 2013 List with Jquery Table Library Representation

REST API Call To SharePoint 2013 List with Jquery Table representation
--------------------------------------------------------------------------------------------


<script type="text/Javascript" src="/sites/km/SiteAssets/jquery-1.8.2.js" ></script>
<script type="text/Javascript" src="/sites/km/SiteAssets/jquery.dataTables.min.js" ></script>

<link rel="stylesheet" type="text/css" href="/sites/km/SiteAssets/jquery.dataTables.css"/>



<input type="text" id="Country" >
<input type="button" value="Get Customers" onclick="LoadCustomers($('#Country').val());" />

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead><th>CustomerID</th><th>Company Name</th><th>Contact name</th><th>Address</th><th>City</th><th>Country</th></thead>
</table>


<script type="text/Javascript">

function xyz()
{
 alert('HI');
}

function LoadCustomers(country)
{
alert('Hi');

var call = $.ajax({
url:_spPageContextInfo.webAbsoluteUrl +"/_api/web/Lists/GetByTitle('NewCustomers')/items?" +
"$select=CustomerID,CompanyName,ContactName,Address,City,Country&$filter=(Country eq '"+country+"')&$top=100",
  type: "GET",
  dataType: "json",
  headers:{Accept: "application/json;odata=verbose"}
 
});

call.done(function(data, textStatus, jqXHR){
          $('#example').dataTable({
                "bDestroy": true,
                "bProcessing": true,
                "aaData": data.d.results,
                "aoColumns": [
                    { "mData": "CustomerID" },
                    { "mData": "CompanyName" },
                    { "mData": "ContactName" },
                    { "mData": "Address" },
                    { "mData": "City" },
                    { "mData": "Country" }]
              });
});
call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving Tasks: " + jqXHR.responseText);
        });

}

</script>

Demo Image
--------------------









No comments:

Post a Comment