0

AJAX 呼び出しを使用して JSON データを取得した後、テーブルに行を追加しようとしていますが、行が表示されません。

    function populateTable() {
    var request = $.ajax({
        url: "http://app.evolution-betting.net/public/ajaxevents",
        type: "GET",
        dataType: "json"
    });

    request.done(function (data) {
        $.each(data, function (index, element) {

            var ns = '';
            var tip = '';
            var status = '';
            if (element.ev_f == '1') {
                if (element.ev_ns1 == '' && element.ev_ns2 != '' && element.ev_f == '1') {
                    ns = '<td id="ns1" class="hidden-phone" style="border:1px solid #CC0000;"></td>
                                                                                                        <td id="ns2" class="hidden-phone">' + element.ev_ns2 + '</td>';
                } else if (element.ev_ns1 != '' && element.ev_ns2 == '' && element.ev_f == '1') {
                    ns = '<td id="ns1" class="hidden-phone">' + element.ev_ns1 + '</td>
                                                                                                        <td id="ns2" class="hidden-phone" style="border:1px solid #CC0000;"></td>';
                } else if (element.ev_ns1 == '' && element.ev_ns2 == '' && element.ev_f == '1') {
                    ns = '<td id="ns1" class="hidden-phone" style="border:1px solid #CC0000;border-right:0px"></td>
                                                                                                        <td id="ns2" class="hidden-phone" style="border:1px solid #CC0000;"></td>';
                } else {
                    ns = '  <td id="ns1" class="hidden-phone">' + element.ev_ns1 + '</td>
                                                                                                        <td id="ns2" class="hidden-phone">' + element.ev_ns2 + '</td>';
                }
            } else {
                ns = '<td id="ns1" class="hidden-phone"></td>
                                                                                                        <td id="ns2" class="hidden-phone"></td>'
            }
    if (element.ev_f == '1' && (element.ev_ns1 != '' || element.ev_ns2 != '')) {
                if (element.ev_tip == '1' && (element.ev_ns1 > element.ev_ns2)) {
                    tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
                } else if (element.ev_tip == '1X' && (element.ev_ns1 >= element.ev_ns2)) {
                    tip = '      <td class="hidden-phone"><span class="label label-success">Win</span></td>';
                } else if (element.ev_tip == '2' && (element.ev_ns1 < element.ev_ns2)) {
                    tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
                } else if (element.ev_tip == '2X' && (element.ev_ns1 <= element.ev_ns2)) {
                    tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>'
                } else if (element.ev_tip == '12' && ((element.ev_ns1 > element.ev_ns2) || (element.ev_ns1 < element.ev_ns2))) {
                    tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
                } else if (element.ev_tip == 'X' && (element.ev_ns1 == element.ev_ns2)) {
                    tip = '<td class="hidden-phone"><span class="label label-success">Win</span></td>';
                } else {
                    tip = '<td class="hidden-phone"><span class="label label-warning">Lose</span></td>';
                }
            } else {
                tip = '<td class="hidden-phone"><span class="label label-info">Pending</span></td>'
            }
            if (element.ev_f == '0' && element.ev_s == '1') {
                status = '<td class="hidden-phone"><span class="label label-info">In progress</span></td>';
            } else if (element.ev_s == '0' && element.ev_f == '0') {
                status = '<td class="hidden-phone"><span class="label label-warining">Not started</span></td>';
            } else {
                status = '<td class="hidden-phone"><span class="label label-success">Finished</span></td>';
            }


            var _row = '<tr id="' + element.ev_id + '" class="odd gradeX">
                                                <td>
                                                    <div id="desc" style="display:none">' + element.ev_desc + '</div>
                                                    <div id="etime" style="display:none">' + element.ev_etime + '</div>
                                                    <div id="edate" style="display:none">' + element.ev_edate + '</div>
                                                </td>
                                                <td id="op1">' + element.ev_op1 + '</td>
                                                <td id="op2" class="hidden-phone">' + element.ev_op2 + '</td>
                                                <td id="host" class="hidden-phone">' + element.ev_host + '</td>
                                                <td id="stime" class="hidden-phone center">' + element.ev_stime + '</td>
                                                                                                <td id="date" class="hidden-phone center">' + element.ev_date + '</td>
                                                                                                <td id="tip" class="hidden-phone center">' + element.ev_tip + '</td>
                                                                                                <td id="coef1" class="hidden-phone">' + element.ev_coef1 + '</td>
                                                                                                <td id="coef2" class="hidden-phone">' + element.ev_coef2 + '</td>' + ns + '

                                                                                                <td id="cat" class="hidden-phone">' + element.ev_cat + '</td>'

            + tip + '


                                                ' + status + '

                                                <td class="center">

                                                    <a id="del" data-id="' + element.ev_id + '"href="#" >Delete</a>&nbsp;
                                                                                                        <a id="edit" data-id="' + element.ev_id + '" href="#widget-config" data-toggle="modal" >Edit</a>
                                                </td>
                                            </tr>
';

            $("#sample_1").find('tbody')
                .append(_row);              

        });
    });
    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });
}
4

1 に答える 1

0

以下は、AJAX 呼び出しを使用してデータを html テーブルにロードする作業サンプルです。さらにデータ行を追加する場合は、次のようにループします。

$.ajax({

type: "GET",
 url: "/controllerURL.html", //controller URL
 contentType: "application/json; charset=utf-8",
 dataType: "json",    

 success: function (results) {
    console.log(results)
     var success = results.success;
    if(success){            
         var finaldata = "<tbody><thead><tr><th>ID</th><th>header1</th><th>header2</th><th>header3</th></tr></thead>"; //data
    var data = results.message;
        data = jQuery.parseJSON(data);
    alert(data);
        for(var i = 0; i < data.length; i++){
            var value = data[i];                
            finaldata = finaldata+  "<tr><th>"+value.ID+"</th><th>"+value.variable1+"</th><th>"+value.variable2+"</th></tr>";
                                        }
        finaldata = finaldata + "</tbody>";
    $("#tableID").html(finaldata);
     }            
 },
 error: function (data) {       
    alert("fail");
 console.log('ajax call error');    

 }
于 2015-10-09T15:29:35.070 に答える