时间戳

首页 > 解决方案 > How to add json complex format to html table

javascript - How to add json complex format to html table

问题描述

I used AJAX and get JSON response then I want to map json to table html like

# | TypeID | TypeDesc | CreateBy

1 | 000001 | AAAAAA | Adam

2 | 000002 | BBBBBB | James

This is my json

{
    "records": [{
        "type_id": 000001,
        "type_desc": "AAAAAA ",
        "type_createby": "Adam"
    }, {
        "type_id": 000002,
        "type_desc": "BBBBBB",
        "type_createby": "James"
    }, {
        "type_id": 000003,
        "type_desc": "CCCCCC",
        "type_createby": "Sam"
    }]
}

and this is I'm trying 

success: function (response) {
    $('#table-container').html("");

    $.each(response, function (index) {
        var tableRow = "";
        var row = 1;
        tableRow = $('<tr/>');
        tableRow.append("<td>" + row + "</td>");
        row = row + 1;
        tableRow.append("<td>" + response[index].type_id + "</td>");
        tableRow.append("<td>" + response[index].type_desc + "</td>");
        tableRow.append("<td>" + response[index].type_createby + "</td>");

        $('#table-container').append(tableRow);
    });
},

My display show the table but the data still show "undefined". There are two questions I have.

1.How to define the correct data ?

2.How to loop to show 5 row and get paging with javascript ?

标签： javascriptjqueryhtmljsonajax

解决方案

  1. 使用“ response.records”；

    if (response && response.records) { $.each(response.records, function (index, value) { var tableRow = ""; var row = 1; tableRow = $(''); tableRow.append("" + row + ""); row = row + 1; tableRow.append("" + value.type_id + ""); tableRow.append("" + value.type_desc + ""); tableRow.append("" + value .type_createby + ""); $('#table-container').append(tableRow); }); }

  2. 分页的实现方式不同，具体取决于使用的自定义表格控件。

推荐阅读