Django：使用DataTables

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);

Key是表选项中的这一行，它定义了来自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，但它可能会让你朝着正确的方向前进。