django - Django：使用数据表

Question

我想使用 ajax 向我的表中引入过滤和排序功能。根据我的发现，DataTables接缝是最好的选择。但是，我似乎无法让它工作！我尝试的第一件事是使用它，就像他们在演示中设置它的方式一样。但是我无法缝合以生成搜索表单，并且排序也不起作用。然后，我尝试使用为实现该功能而创建的众多软件包之一。但是，我发现文档通常不是很清楚且难以遵循，或者即使我确实遵循了它，我也会留下表格渲染良好，但搜索和排序仍然不可用。所以我决定回到我原来的地方，看看是否有人可能知道我做错了什么。该页面确实正确呈现了表格，如果我查看页面源代码，则 javascript 已正确链接。

这是html：

<pre>
    <code>
        {% extends "theme_bootstrap/base.html" %}
        {% load staticfiles %}

        {% block extra_style %}
            <script src="{% static "js/jquery.js" %}"></script>
            <script src="{% static "js/jquery.dataTables.js" %}"></script>
            <script type="text/javascript" charset="utf-8">
                $(document).ready(function() {
                    $('#test').dataTable();
                });
            </script>
        {% endblock %}

        {% block body %}

            {{ store.StoreName}}


            {% if liquors.count > 0 %}
                <h1>liquors</h1>

                <table id="test"> 
                    <thead>
                        <tr>
                            <th>Liquor Code</th>
                            <th>Brand Name</th>
                            <th>Vendor Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for liquor in liquors %}
                            <tr>
                                <td>{{ liquor.LiquorCode }}</td>
                                <td><a href="/liquors/get/{{ a.StoreID }}/{{ liquor.id }}/">{{ liquor.BrandName }}</a></td>
                                <td>{{ liquor.VendorName }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p>None to show!</p>
            {% endif %}
        {% endblock %}
    </code>
</pre>

这也是我的看法。也许我在这里做错了什么。

def liquors(request, store_id):
    args = {}
    args.update(csrf(request))
    a = Store.objects.get(StoreID=store_id)  
    args['liquors'] = Liquor.objects.all()
    args['a'] = a

    return render(request, 'liquors.html', args)

Answer 1

我在不久前从事的一个项目中做到了这一点。这是我在模板中定义表格的方式：

$(document).ready( function () {
            var ticketTable = $('#ticket-table').dataTable( {
                "fnDrawCallback": function() {
                    // Initialize popovers anytime new data is loaded into the table
                    $('a[rel=tooltip]').tooltip({
                        placement: 'left'
                    });
                },
                "bServerSide": true,
                "bAutoWidth": false,
                "sPaginationType": "bootstrap",
                "sAjaxSource": "{% url get_tickets_list %}",
                "aaSorting": [[ 2, "desc" ]],
                "iPageLength": 25,
                "bLengthChange": false,
                "bStateSave": true,
                "bFilter": true,
                "sDom": "<'length-change'><'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'length-change'><'span6'p>>",
                "oLanguage": {
                    "sSearch": ""
                },
                "aoColumns": [
                    { "bSortable": false, "sWidth": "14px", "bSearchable": false },
                    { "sWidth": "160px", "bSearchable": true },
                    { "sWidth": "60px", "bSearchable": true },
                    { "bSearchable": true },
                    { "bSortable": false, "sWidth": "14px", "bSearchable": false },
                    { "sWidth": "50px", "sClass": "center", "bSearchable": false },
                    { "bSearchable": true },
                    { "sWidth": "70px", "sClass": "center", "bSearchable": false },
                    { "sWidth": "75px", "bSearchable": true }
                ] } ).fnSetFilteringDelay(500);

关键是表选项中的这一行，它定义了来自 DataTable 的 AJAX 请求的源 URL：

"sAjaxSource": "{% url get_tickets_list %}",

然后，您还需要一个视图来返回 AJAX 请求：

def get_tickets_list(request, queryset=Ticket.objects.all()):
    """
    AJAX calls for DataTable ticket list.
    """

    #columnIndexNameMap is required for correct sorting behavior
    columnIndexNameMap = { 0: 'link', 1 : 'created', 2: 'priority', 3: 'client', 4: 'client_email', 5: 'sites', 6: 'problem',7: 'updates', 8: 'state' }
    #path to template used to generate json (optional)
    jsonTemplatePath = 'json_tickets.txt'

    #call to generic function from utils
    return get_datatables_records(request, queryset, columnIndexNameMap, jsonTemplatePath)

正如我所说，这是不久前的事情，可能不再适用于最新版本的 DataTable，但也许它会让您朝着正确的方向前进。