如何在bootstrap表中显示Ajax返回的Json数据

时间:2015-06-01 09:53:52

标签: jquery ajax json twitter-bootstrap cordova

我正在开发一个cordova移动应用程序。我使用RESTful Web服务通过AJAX调用获取JSON数据,如下所示。如何在带有填充的引导表中显示返回的JSON数据?

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); 
    });
});

JSON响应采用这种格式。

{ "employeeId ": "00001" } 

{ "empFirstName ": "techcruize" }

如何在引导程序分页表中显示此数据?我已尝试过上述内容,但它在表格中提供了undefined个值。

1 个答案:

答案 0 :(得分:3)

请尝试我的方案,我认为它适合你的自助表。

假设这是你的表:                    名称     位置     办公室     分机。     开始日期     薪水               //不要在这里插入thead标签。 Javascript会照顾它。               名称     位置     办公室     分机。     开始日期     薪水               

在你的ajax电话中:

   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
        });
      });

请尝试使用该方案。