Django：使用数据表

Posted 2023-05-07

【中文标题】Django：使用数据表

【英文标题】：Django: Using DataTables

【发布时间】：2013-08-29 15:17:32

【问题描述】：

我想使用 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)

【参考方案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，但也许它会让您朝着正确的方向前进。