Django - 使用Ajax重新加载数据表

时间:2015-11-17 17:12:58

标签: javascript jquery python ajax django

我正在寻找使用Ajax在Django中重新加载数据表的正确解决方案。

目前,除了一个例外,它的效果非常好。表由引导程序自动分页。当Ajax重新加载表时,它会显示所有结果,而不会在页面上进行拆分。

orders_list.html:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
        <div class="datatable-scroll">
        <table class="table datatable-basic dataTable table-striped no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
            <thead>
                <tr role="row">
                    <th class="sorting_asc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="" aria-sort="ascending">Nr.</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="">Data</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="">Przewoźnik</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="">Status</th>
                    <th class="text-center sorting_disabled" rowspan="1" colspan="1" aria-label="Akcje" style="width: 100px;">Akcje</th>
                </tr>
            </thead>
            <tbody id="orders_table">
                {% include "orders/orders_table.html" %}
            </tbody>
        </table>
        </div>
</div>

orders_table.html:

{% for order in orders %}
    <tr role="row">
        <td class="sorting_1">{{ order.shop_order_id }}</td>
        <td class="">
            <span data-popup="tooltip" title="{{ order.date }}">
                {{ order.date|date:"M d, Y" }}
            </span>
        </td>
        <td>{{ order.carrier }}</td>
        <td>
            {% if order.packed %}
                <span class="label bg-grey">
                    Spakowano
                </span>
            {% else %}
                <span class="label label-info">
                    {{ order.status }}
                </span>
            {% endif %}
        </td>
{% endfor %}

的javascript:

setInterval(function(){
    $.ajax({    
       url: '/Project/zamowienia/orders_test',
          success: function(data) {
          $('#orders_table').html(data);
          }
    });
}, 10000)

urls.py:

urlpatterns = [
    url(r'^$', orders_list),
    url(r'^orders_test$', orders_list_test),
]

的观点:

def orders_list(request):
    orders = Order.objects.all().order_by('-shop_order_id')
    carriers = Carriers.objects.all().order_by('name')
    statuses = Status.objects.all().order_by('name')
    Status().import_status()
    Order().import_orders()
    return render(
            request, 'orders/orders_list.html', 
            {
                'namespace': 'Zamówienia',
                'icon': 'credit-card',
                'statuses': statuses,
                'carriers': carriers,
                'orders': orders
            }
        )


def orders_list_test(request):
    orders = Order.objects.all().order_by('-shop_order_id')
    return render(
                request, 'orders/orders_table.html', 
                {
                    'orders': orders
                }
            )

1 个答案:

答案 0 :(得分:1)

很明显,请使用table.draw():)。