How to bind the api data by using datatables plugins

Step1:

Welcome to the designer blog, here we are going to discuss,  How to bind the API data in the data tables plugins

Step2:

Below is the function where the API is called and data is successfully fetched and append in the <table id="populardoc">


<Script>

function getdoclibhits()

 {

 var totalcnt=0;

  $.ajax({

 url: "http://in-bomspsuwv003:8182/sites/advisoryindiakm/_api/search/query?querytext='{1C5FC323-4E36-44CA-8390-987189C28B1F}'&rowlimit=10000&sortlist='ViewsLifeTime:descending'",

 type: "GET",

 headers: {

 "Accept": "application/json;odata=verbose"

 },

 success: function(data) {

 //log the json to analyze and visualize

 console.log(data);

 var items=data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;

 //log the actual 10 items that is going to be displayed

 console.log(items);

 //$('#popular').append('<table><tr><th>Doc Name</th><th>No. of Hits</th></tr>');

 $.each(items, function(index, item) {

 var ret= items[index].Cells.results[6].Value;

 //replacing any spaces in the URL

 var itemlinks= ret.replace(/ /g,"%20");

 var cnt=0;

 if (items[index].Cells.results[21].Value ==null)

 {

 cnt =0;

 }

 else{

 cnt = items[index].Cells.results[21].Value;

 }

 totalcnt = totalcnt+parseInt(cnt);

 //$('#popular').append('<div class=recentitems><a target="_blank" class=itemtitle href='+itemlinks+'>'+items[index].Cells.results[3].Value+'</a> Hit counts are ' +cnt+'</div');

  $('#populardoc').append('<tr><td><a target="_blank" class=itemtitle href='+itemlinks+'>'+items[index].Cells.results[3].Value+'</a></td><td>' +cnt+'</td></tr>');

 });

  $('#populardoc').DataTable();

  $('#popularpadcapdoc-total').append('<div style="width:100%;"><h3 class="doctotal">'+totalcnt+'</h3><h3 class="doctotalcount">Total</h3></div>');

}

 });

 }

</Script>

Step3:

Before binding the data we  have to make sure that  table structure have formed  well with  <thead> tag and <tbody> tag. if u missed this structure it wont bind as excepted.

<table id="populardoc" class="table table-striped table-bordered">
<thead>

<tr>

<th>Document Name</th>

<th>No. of Hits</th>

</tr>

</thead>

<tbody>

</tbody>
</table>

Step4:

Final Output

Thanks for reading article.Stay Tune on www.webdesignersdairy.com  for more updates.