javascript - html 在单击按钮时从 json 数据加载更多

Question

我正在尝试从我的 API 中显示机构列表，我只想显示 10 个，当单击 load more 按钮时，它应该显示 remaining 和 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 代码是

function loadMore(url) {
            alert(url);
             $.ajax({
              dataType: "json",
              url: url,
              success: function (data) {
                    alert(data);

                    var table = document.getElementById("claimList");
                    for (var i=0; i < data.length; i++) {

                        var row = table.insertRow(-1);
                        var cell1 = row.insertCell(0);
                        var cell2 = row.insertCell(1);
                        var cell3 = row.insertCell(2);
                        cell3.style.width = '25px';

                        cell1.innerHTML = '<td><a href="../institutedetails?businessId={{ data.businessId }}">{{ data.displayName }}</a></td>';
                        cell2.innerHTML = '<td>{{ data.businessAddress }}</td>';
                        cell3.innerHTML = '<td>{{ data.businessLocation }}</td>';
                    }


               },
              error: function (request, error) {
                    console.log(arguments);
                    alert(" Can't load more because " + error);
                },
            });
        }

我正在获取驻留在 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:

$(document).ready(function() {
    $("a.toggle_hidden_details").on("click", function(e) {
        var top_div = $(this).closest('div.td_details');
        var hidden_div = top_div.find('div.hidden_details');
        var icon = top_div.find('i')

        if (hidden_div.is(':visible')) {
            hidden_div.slideUp();
            icon.removeClass('icon-minus');
            icon.addClass('icon-plus');
        } else {
            hidden_div.slideDown();
            icon.removeClass('icon-plus');
            icon.addClass('icon-minus');
        }
    });
    if ($("input[name='data_source_url']").length > 0) {
    var source = $("input[name='data_source_url']").val();
    $('table.admin_details').dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": source
    });
} else {
    $('table.details').dataTable();
}

views.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))