将 django 模板变量传递给 js 数据表

Posted 2023-02-24

【中文标题】将 django 模板变量传递给 js 数据表

【英文标题】：Passing django template variables to js datatables

【发布时间】：2018-12-26 18:47:23

【问题描述】：

您好，我想使用 JS 数据表库创建表。

将模板中的值传递给 js 脚本时遇到问题。 我从要显示的表中创建了 JSON 对象。 它已正确传递给模板，当我显示它时一切都很好，但是当试图将它传递给脚本时什么也没发生，我得到了空表。

我就是这样做的：

class VotesList(generic.ListView):
    model = Vote
    template_name = 'votes-list.html'
    def get_context_data(self, **kwargs):
        votes = Vote.objects.all().values('user', 'group', 'council')
        votes_json = json.dumps(list(votes))
        context = super(VotesList, self).get_context_data(**kwargs)
        context['orderby'] = self.request.GET.get('orderby', 'created_date')
        context['json_data'] = votes_json

    return context

模板：

% block javascript %
% load static %

<script type="text/javascript">
$(document).ready(function() 

    var json=JSON.parse(' json_data | safe ');
    $('#votes_list').DataTable(
       data: json,
        columns:[
         title: "user" ,
         title: "group" ,
         title: "council" ]
     );
;

</script>

% endblock %

% block content %

    <p> json_data | safe </p> <<< here data is printed fine
    % if vote_list %

        <table id="votes_list" class="display", style="width:100%">
            <thead>
                <tr>
                    <th>Właściciel</th> 
                    <th>Grupa</th> 
                    <th>Rada</th> 
                </tr>
            </thead>

        </table>

    % else %
        <p>Brak głosowań!</p>
    % endif %

% endblock %

输出数据如下所示：

["user": 2, "group": 1, "council": 1, "user": 2, "group": 2, "council": 1, "user": 3, "group": 1, "council": 1, "user": 2, "group": 1, "council": 1, "user": 2, "group": 2, "council": 2, "user": 1, "group": 1, "council": 2, "user": 3, "group": 1, "council": 1, "user": 2, "group": 1, "council": 1, "user": 1, "group": 1, "council": 2, "user": 1, "group": 2, "council": 1, "user": 1, "group": 1, "council": 1, "user": 1, "group": 1, "council": 1]

我的第二个问题是关于其他的： 我存储了大量信息作为选择：

STATUS_INACTIVE = 0
STATUS_ACTIVE = 1
STATUS_FINISHED = 2
STATUS_CHOICES = (
    (STATUS_INACTIVE, 'Inactive'),
    (STATUS_ACTIVE, 'Active'),
    (STATUS_FINISHED, 'Finished'),
)

如何将不是数字而是这个人类可读的值（'Inactive'）传递给上面的 JSON？

【问题讨论】：

对于第二个问题，您可以尝试 get_status_display。对于您的第一个问题，您为什么要转换为 json？为什么不直接将上下文呈现为表格？

表是什么意思？那么如何将其传递给 JS？

【参考方案1】：

对于第一个问题，尝试在</thead> 标记后添加<tbody></tbody>。重新运行代码。

要使 DataTables 能够增强 HTML 表格，表格必须是有效的、格式良好的 HTML，具有标题 (thead) 和单个正文 (tbody)。

还有另一种更简单的方式来呈现数据表。 view.py -

context['json_data'] = votes # no need to use json.dumps

在 html-

   <table id="votes_list" class="display", style="width:100%">
        <thead>
            <tr>
                <th>Właściciel</th> 
                <th>Grupa</th> 
                <th>Rada</th> 
            </tr>
        </thead>
        <tbody>
            % for data in json_data %
                <tr> data.user </tr>
                <tr> data.group  </tr>
                <tr> data.council  </tr>
            % endfor %
        </tbody>
   </table>

    <script type="text/javascript">
        $(document).ready(function() 
            $('#votes_list').DataTable();
        
    </script>

第二个问题-

% if data.user == 1 %
   Active
% elif data.user == 2%
   Inactive
% else %
   Finished
% endif %
OR 
% if data.group == 1 %
    status_dict.0 
% elif data.group == 2%
    status_dict.1 
% else %
    status_dict.2 
% endif %

>>>status_dict = dict(STATUS_CHOICES)
0: 'Inactive', 1: 'Active', 2: 'Finished'

在数据表中 - 您可以应用相同的逻辑。例如-

  "columns": [
     "data": "engine" ,
     "data": "browser" ,
    
      "data": "platform",
      "render": function(data, type, row, meta)  
                      if(true)
                          return “display this” 
                      ;
                      return “false"
    
  ]

【参考方案2】：

如果您像这样在视图中传递数据

class VotesList(generic.ListView):
    model = Vote
    template_name = 'votes-list.html'

    def get_context_data(self, **kwargs):
        context = super(VotesList, self).get_context_data(**kwargs)
        context['votes'] = Vote.objects.all()
        return context

然后在你的模板中你可以有

---

% block javascript %
    % load static %
    
    <script type="text/javascript">
    $(document).ready(function() 
        $('#votes_list').DataTable(
           
        );
    );
    
    </script>
    
    % endblock %
    
    % block content %
    
        % if vote_list %
    
            <table id="votes_list" class="display", style="width:100%">
                <thead>
                  <th>Właściciel</th> 
                  <th>Grupa</th> 
                  <th>Rada</th> 
                </thead>
                <tbody>
                  % for vote in votes %
                    <tr>
                      <td> vote.user </td>
                      <td> vote.group</td>
                      <td> vote.countcil </td>
                    <tr>
                  % endfor %
                </tbody>
            </table>
    
        % else %
            <p>Brak głosowań!</p>
        % endif %
    
    % endblock %

它应该呈现为 JS 数据表

【讨论】：

嗯，是的，你说得对，但我想用“child-row”制作表格datatables.net/examples/api/row_details.html 当我点击行时，它将显示有关对象的更多信息。并非所有列都在开始时显示，但只有少数列，单击时会显示更多信息。所以我停止使用这个子行将这个变量传递给 json。所以你的解决方案在这里也应该没问题？

是的，这个解决方案应该可以工作，也可以作为 json 传递。我认为这种方式更直接。当您填充子行时，您可以在 javascript 中以相同的方式插入变量；使用 vote.something

【参考方案3】：

对于您的第一个问题，我会将您的模板变量存储在一个 JavaScript 变量中，例如 var data = " template_var "，然后在您现在尝试使用它的地方使用该新变量。然后你应该能够处理你正在尝试做的事情。

请注意，其他答案会告诉您只创建一个表，但我知道您正在使用 DataTables，此外，如果您尝试在表中加载超过 50 个对象，您可能会遇到加载速度问题。因此，做您正在做的事情可能会很好，这将允许您使用 AJAX 并检索下一组使用分页的数据。这是可以在将来对应用程序进行校对时解决的问题。

【讨论】：

是的，我读过有关 ajax 的文章，但真的不知道如何开始

嗯，我使用 dump: json.dumps(list(votes)) 传递给模板，当我做 var data = " json_data | safe " 时它仍然一样

所以，django 中的 ajax 非常简单，到处都有教程。关于其他评论，问题可能在于它被识别为字符串并且没有从您的 JSON.parse 中正确解析。尝试控制台记录新的 js 变量并在此处响应。附带说明一下，您应该做的只是渲染没有数据的模板，然后当页面准备好时，执行 AJAX 调用并返回一个 JsonResponse 对象，该对象是 Django 的一部分。然后，您可以轻松地将数据从 Javascript 放入表中。这将缓解大量数据的加载缓慢问题。