Question

我在使数据正确显示方面遇到问题，我有ajax通过json返回数据。我需要将它显示在表格中。

    <table>
      <tr>
        <td>customer name</td>
      </tr>
      <tr>
        <td>
          <table>
            // Order Rows Here
            <tr><td>...</td></tr>
          </table>
        </td>
      </tr>
    </table>

我的jQuery： $ .each（report_data，function（index，customer）{

    //Get Order Contents

    $.each(report_data.contents, function (i, contents) {
        //console.log(contents.name);
        table += "<tr><td><table>"
        table += "<tr>" + contents.name + "</td><td>" + contents.qty +"</td><td>" + contents.price_per +"</td></tr>";
        table += "</table></td></tr>"   
    });             

});

我的json数据： {"customer":{"id":"179","name":"julian.gardner","total":"4441.00"},"contents":{"360": {"name":"The Flying Training Manual","qty":"2","price_per":"75.00"},"361":{"name":"Student Pilot Kit","qty":"2","price_per":"179.00"},"362":{"name":"Visual Flight Guide","qty":"10","price_per":"33.00"},"359":{"name":"Basic Aeronautical Knowledge","qty":"4","price_per":"75.00"},"358":{"name":"Flight Radio for Pilots VFR Operations","qty":"4","price_per":"33.00"},"357":{"name":"ATC Pilots Logbook","qty":"30","price_per":"26.00"},"363":{"name":"Human Factors","qty":"3","price_per":"44.00"},"364":{"name":"Aircraft General Knowledge","qty":"3","price_per":"48.00"},"365":{"name":"Aerodynamics","qty":"3","price_per":"48.00"},"366":{"name":"Meteorology","qty":"3","price_per":"48.00"},"367":{"name":"Navigation","qty":"3","price_per":"48.00"},"368":{"name":"Flight Rules and Air Law","qty":"5","price_per":"48.00"},"369":{"name":"Seven Volume PPLCPL Kit","qty":"3","price_per":"320.00"},"370":{"name":"Flight Rules and Air Law for the Air Transport Pilot","qty":"2","price_per":"32.50"},"371":{"name":"Instrument Flight Guide","qty":"5","price_per":"33.00"},"372":{"name":"Pilots Index","qty":"5","price_per":"26.40"},"373":{"name":"Night Flight","qty":"1","price_per":"44.00"},"374":{"name":"Aircraft Operation Performance and Planning","qty":"1","price_per":"77.00"}}}

任何帮助？

Answer 1

使用jquery dataTable。它甚至可以为您提供超出预期的功能，并且易于使用。样品：

<table id="userTable" >
   <thead>
                                    <tr>
                                        <th>First Name</th>
                                        <th>Last Name</th>
                                        <th>Email</th>
                                        <th>Phone Number</th>
                                    </tr>
                                </thead>
                            </table> 


<script>
     $(document).ready(function() {
    $("#userTable").dataTable({
        "ordering": false,
        "columns":["firstName","lastName","email","phone"],
        "pagingType": "full_numbers",
        "ajax": {
            "url": "user/index.json",
            data: {start: 0, max: 0},
            "dataSrc": "",
            error: function(xhr, error) {
                if (xhr.status == 400) {
                    alert('Bad Request. [400]');
                }
                else if (xhr.status == 401) {
                    alert('User Unauthorized To Access Resource. [401]');
                }
                else if (xhr.status == 403) {
                    alert('Access To Resource Forbidden [403]');
                }
                else if (xhr.status == 404) {
                    alert('Requested Resource Not Found [404].');
                } else if (xhr.status == 500) {
                    alert('Internal Server Error [500].');
                }
                else if (xhr.status == 503) {
                    alert('Service Unavailable [503].');
                }
                else if (error === 'parsererror') {
                    alert('Requested JSON parsing failed.');
                }
                else if (error === 'timeout') {
                    alert('Time out error.');
                }
                else if (error === 'abort') {
                    alert('Ajax request aborted.');
                }
                else {
                    alert('Uncaught Error.\n' + xhr.responseText);
                }
            },
        }
    });
});
</script>

检查here以获取有关如何使用它的示例。

jQuery json将多维数组转换成表

1 个答案: