jquery - 使用返回的 json 数据填充 jquery 数据表

Question

我有一些基于用户输入返回的 json 对象

$('#button').click(function () {
        var usersData= $('input[name="UserInputData"]').val();

        $.ajax({
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ UserInputData: usersData}),
            url: '/Home/Data',
            success: function (result) {
                $.each(result, function (i, item) {
                    // how to invoke data table and populate with returned
                    // item object, for ex. item.Title                    
                });
            },
            error: function () { alert("error"); }
        });
    });

只是为了澄清我从控制器获取 json 对象列表，没关系，我正在努力解决如何在数据表上显示这些数据。

Answer 1

success: function (result) {
    //if table is already on the page
    var table = $("table-selector");
    table.find("tr").remove(); //remove all previous rows if needed

    //or, if table does not exist
    var table = $("<table></table>");
    $("table-container-selector").append(table);

    $.each(result, function (i, item) {
        var tr = $("<tr></tr>");
        table.append(tr);

        var td = $("<td>" + item.field1 + "</td>");
        tr.append(td);

        var td = $("<td>" + item.field2 + "</td>");
        tr.append(td);

        var td = $("<td>" + item.field3 + "</td>");
        tr.append(td);
    });
},