CODEWITHSUNDEEP
jqueryajaxjsontwitter-bootstrapcordova
Tech Cruize
Tech Cruize

Reputation: 107

How to display Ajax Returned Json Data in bootstrap Table

I am developing a cordova mobile application. I consume RESTful web services to fetch JSON data through an AJAX call as below. How do I display the returned JSON data in a bootstrap table with padding?

var datanew = "parameters";
$.ajax({
    url: "http://some_url",
    async: true,
    crossDomain: true,
    type: "post",
    beforeSend: function(xhr) { 
        xhr.setRequestHeader("Authorization", "Basic " + btoa('string' + ":" + 'string' )); 
    },
    data: datanew,
    dataType: "json",
    success: function (data) {
        alert("success");
        var newDta = JSON.stringify(data); 
        alert(newDta);  
        var trHTML = '';
        $.each(newDta, function (i, item) {
            trHTML += '<tr><td>' + item.employeeId + '</td><td>' + item.empFirstName + '</td><td>' + item.empMiddleName + '</td></tr>';
        });
        $('#results').append(trHTML); 
    });
});

The JSON response is in this format.

{ "employeeId ": "00001" }

and

{ "empFirstName ": "techcruize" }

How do I display this data in a bootstrap paginating table? I have tried the above but it's giving undefined values in a table.

Upvotes: 0

Views: 1795

Answers (1)

piyush
piyush

Reputation: 554

Please try with my scenario i think it is suitable for you bootstrap table.

Suppose this is you table: Name Position Office Extn. Start date Salary //Do not insert thead tag here. Javascript will take care of it. Name Position Office Extn. Start date Salary

In your ajax call:

   var datanew="parameters";
    //Your table id
    var oTable = $('#jsontable').dataTable();
    $.ajax({
        url: "http://some_url",
        async:true,
        crossDomain:true,
        type: "post",
        beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa('string' + ":" + 'string' )); },
        data: datanew,
         dataType: "json",
         success: function (s) {
              console.log(s);
oTable.fnClearTable();
for(var i = 0; i < s.length; i++) {
oTable.fnAddData([
s[i][0],
s[i][1],
s[i][2],
s[i][3],
s[i][4]
]);
} // End For
        });
      });

Please try with that scenario.

Upvotes: 3

Related Questions