-2

次のコードを使用して、jQuery ajax を介して入力されるテーブルがあります。

$.ajax({
    type:  "POST",
    cache: false,
    url:   "/files/event_lister.php", // script that gets data from
                                      // DB and responds with JSON sample shown below
    data:  input_data,
    dataType: "json",
    success: function(data) {
        var html = "";
        $.each(data["events"], function(id, event) {
            course_url = "/courses/" + group_titles[event["ProgramGroup"]] + 
                         "/" + url_titles[event["ProgramCode"]] + "/" +
                         event["EventCode"] ;
            html += "<tr>" +
            "          <td>" + event["Course_Type"] + "</td>" +
            "          <td>" + event["FormalDate"] + "</td>" +
            "          <td>" + event_lookup[event["ProgramCode"]] + "</td>" +
            "          <td>" + (parseInt(event["Price"]) > 0 ? "$" + parseInt(event["Price"]) : "&nbsp;") + "</td>" +
            "          <td class="nb">" +
            "            <a href=\"" + course_url + "\">Details</a>" +
            "        </td>" +
            "      </tr>";
        });
        if (html ==  "") {
            html="<tr><td colspan=5 class="fullspan"><p>No Results to display.</p></td></tr>";
        }
        $("#events_tbody").html(html); // #events_body is tbody of table
    }
});

このフィドルにあるサンプル コードを変更して、自分のデータを使用しようとしています。

http://jsfiddle.net/SAWsA/11/

http://jsfiddle.net/Mrbaseball34/aEypQ/

上記の 2 番目のフィドルには JSON データがあります...

<table class="table table-striped table-condensed table-hover">
    <thead>
    <tr>
        <th class="lb">Location<a ng-click="sort_by('Course_Type')"><i class="icon-sort"></i></a></th>
        <th width="75px">Date<a ng-click="sort_by('FormalDate')"><i class="icon-sort"></i></a></th>
        <th>Program<a ng-click="sort_by('Program')"><i class="icon-sort"></i></a></th>
        <th>Cost</th>
        <th>Information</th>
    </tr>
    </thead>
    <tfoot>
    <td colspan="6">
        <div class="pagination pull-right">
            <ul>
                <li ng-class="{disabled: currentPage == 0}">
                    <a href ng-click="prevPage()">« Prev</a>
                </li>
                <li ng-repeat="n in range(pagedItems.length)"
                    ng-class="{active: n == currentPage}"
                    ng-click="setPage()">
                    <a href ng-bind="n + 1">1</a>
                </li>
                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                    <a href ng-click="nextPage()">Next »</a>
                </li>
            </ul>
        </div>
    </td>
    </tfoot>
    <tbody>
    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
        <td>{{item.Course_Type}}</td>
        <td>{{item.FormalDate}}</td>
        <td>{{item.Program}}</td>
        <td>{{item.Price}}</td>
        <td>{{item.Info}}</td>
    </tr>
    </tbody>
</table>

データは編集できないため、双方向は問題になりません。テーブルに入力するだけで、ユーザーは course_url リンクをクリックしてコースをショッピング カートに追加します。

4

1 に答える 1

1

これは機能するプランカーですが、検索はまだ機能していません。自分で修正できます。
この助けを願っています。

于 2013-04-23T21:31:30.950 に答える