bootstrap表无法加载json对象

时间:2014-12-05 18:18:47

标签: javascript ajax json twitter-bootstrap jsp

我的ajax脚本将json对象发送到浏览器,但该表无法加载json对象。 我的Ajax脚本:

 $.ajax({
            type : "POST",
            url : "getLabels.jsp",
            data : "mailingID=" + selectedValue, // posCodeSelected
            success : function(data) {

                response = $.parseJSON(data);// this statement sends data succesfully to browser

            },
            error : function(response) {
                var responseTextObject = jQuery.parseJSON(response.responseText);
            }
        });

这是我的jsp页面中嵌入的引导程序表。

<table data-height="299" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1">
    <thead>
    <tr>
        <th data-field="rowNumber" >ID</th>
        <th data-field="firstname" >first name</th>
        <th data-field="lastname" >last name</th>
        <th data-field="organization" >organization</th>
        <th data-field="city" >city</th>
        <th data-field="state" >state</th>

    </tr>
    </thead>
</table>

现在让你们这些是我在浏览器中的json响应:

{"rowNumber":1,"mailingID":3,"firstname":"Brian","lastname":"Fairhurst","organization":"Florida State University","city":"Tallahassee","state":"FL"}

2 个答案:

答案 0 :(得分:0)

您必须添加一个返回json对象的新行:

//you need to set id="tbl" to your table on the html

var table = document.getElementById("tbl"); 

var row = table.insertRow(table.rows.length); //insert a new row

// insert new cells with info

cells = [];

for(var i = 0;i < 6;i++){
    cells[i] = row.insertCell(i);
}

// add the information store in json object

cells[0].innerHTML = response.rowNumber;
cells[0].innerHTML = response.firstname;
cells[0].innerHTML = response.lastname;
cells[0].innerHTML = response.organization;
cells[0].innerHTML = response.city;
cells[0].innerHTML = response.state;

答案 1 :(得分:0)

问题是HTML表格没有填充response中的数据。将data-url属性添加到HTML表格应该可以。

所以,而不是:

<table data-height="299" data-show-refresh="true" ...>
    <thead>
    ...

您想要这样做:

<table data-height="299" data-show-refresh="true" data-url="response"...>
    <thead>
    ...