单击按钮，从json数据加载更多html

Question

我正在尝试从我的API中显示机构列表，在这里我只想显示10个，当load more按钮被单击时，它应该显示剩余的，load more按钮包含下一页的url，即json格式的剩余列表

html代码如下

<div class="container text-center">
    <h1 class="text-center">Existing Institutions </h1>
    <div class="row row-centered">
        <div class="col-md-10 col-md-offset-1">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table id="claimList" class="table table-bordered table-hover table-striped tablesorter">
                        <thead>
                            <tr>
                                <th class="header"> Institute Name <i class="icon-sort"></i></th>
                                <th class="header"> Address <i class="icon-sort"></i></th>
                                <th class="header"> Location <i class="icon-sort"></i></th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for key in data %}
                            <tr>
                                <td><a href="../institutedetails?businessId={{ key.businessId }}">{{ key.displayName }}</a></td>
                                <td>{{ key.businessAddress }}</td>
                                <td>{{ key.businessLocation }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <ul class="pager">
                        <li class="next"><button name="load_more" id="load_more" onsubmit="loadMore({{ nextPage }});">Load More</button></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

我的ajax代码是

^{pr2}$

我得到了data中的数据。现在如何解析data并在html表中显示

Answer 1

数据表集成

把它放在HTML中确保jquery被添加。在

https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js

<table class="table table-bordered table-condensed details">
<input type="hidden" name="data_source_url" value="{% url'institutions'%}"
   <thead>
      <tr>
         <th class="header"> Institute Name <i class="icon-sort"></i></th>
         <th class="header"> Address <i class="icon-sort"></i></th>
         <th class="header"> Location <i class="icon-sort"></i></th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>

javascript代码：

^{pr2}$

数据表集成视图.py请确保已为此添加了URL

import json
def issue_history_data(request):
    search = request.GET.get("sSearch")
    institutions = MODEL_NAME.objects.all()
    institutions_list = list(set(institutions))
    # ordering
    sort_column = int(request.GET.get("iSortCol_0"))
    sort_dir = request.GET.get("sSortDir_0")
    # page filter
    start = request.GET.get("iDisplayStart")
    length = request.GET.get("iDisplayLength")
    instituties = institutions_list
    if length != -1:
        page = int(start) // int(length) + 1 if start else 1
        paginator = Paginator(institutions_list, length)
        issues = paginator.page(page)
    institutionsData = []
    for insti in instituties:
        try:
            institutionsData.append([
                '<a href="">name</a>',
                insti.businessAddress,
                insti.businessLocation,
                ])
        except Exception as e:
            log.debug('possible bad issue' + str(issue.pk), exc_info=True)

    returnDict = {
        "sEcho": request.GET.get("sEcho"),
        "iTotalRecords": len(institutions_list),
        "iTotalDisplayRecords": len(institutions_list),
        "aaData": institutionsData
    }
    return HttpResponse(json.dumps(returnDict))

Answer 2

如果您想在移动中加载内容，您应该使用AJAX，而且由于您使用的是jQuery，所以可以使用jQuery.getJSON(URL, callback)。在

function loadMore(page) {
    // This is assuming that your data is at the specified path
    // you should edit it to fit your needs.
    $.getJSON('/path/to/data?page=' + page, function (data) {
        /* Process the data */
    });
}