How to display Ajax Returned Json Data in bootstrap Table

Question

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.

Can u show a working demo in jsfiddle or plunker ?

User_3535
– User_3535

2015-06-01 09:54:57 +00:00
Commented Jun 1, 2015 at 9:54 — User_3535
– User_3535, Commented Jun 1, 2015 at 9:54

piyush · Accepted Answer · 2015-06-01 10:06:49Z

3

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.

answered Jun 1, 2015 at 10:06

piyush

5545 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tech Cruize Over a year ago

Could u pls explain abt the function: oTable.fnClearTable();

Tech Cruize Over a year ago

Its giving .dataTable is not a function.

Collectives™ on Stack Overflow

How to display Ajax Returned Json Data in bootstrap Table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related