在Django中过滤模型并将其显示为表的好方法是什么?

q5lcpyga  于 2023-05-19  发布在  Go
关注(0)|答案(3)|浏览(172)

我一直在努力寻找一种在Django网页上显示过滤模型的简单方法。我正在为我的表使用DataTables。
下面是我的视图的一些代码,它过滤一个值并创建一个序列化的json。我不确定还有其他方法可以做到这一点,但直观地说,转换过滤后的模型并将其发送到'context'参数中的网页是有意义的。

def site(request, site_name):

    filtered = Participant.objects.filter(site_name=site_name).all()
    serialized = json.loads(serialize('json', filtered))

    return render(request, 'site.html', context={'site': site_name, 'filtered': serialized})

下面是我的JavaScript:

$(document).ready(function() {
    $('#my-table').DataTable( {
        data: JSON.parse(filteredData),
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
        pageLength:  50,
        responsive: true,
        processing: true,
        serverSide: false,
        bSearchable: true,

        columns: [
             {"data": "some_data"},
        ],
      
    } );
} );

这里是我在HTML中的filteredData变量中传递的地方:

<script>
    filteredData = "{{filtered}}"
</script>

这不起作用,因为我不确定DataTables如何处理JSON文件。我认为解决方法很简单,但我对Django还是个新手。谢谢大家!

kqlmhetl

kqlmhetl1#

考虑到你的出发点,对你来说最少的工作量可能 * 如下:

**JSON数据 *

您的JSON字符串如下所示(基于另一个答案中的注解):

"[{'model': 'participants.participant', 'pk': 5533, 'fields': {'pGUID': 'somedata', 'site_name': 'somedata', 'fb_email': 'somedata', 'is_authorized': False}}]"

但这不是一个包含有效JSON的字符串。
有效的JSON应该是这样的:

[{
    "model": "participants.participant",
    "pk": 5533,
    "fields": {
        "pGUID": "somedata",
        "site_name": "somedata",
        "fb_email": "somedata",
        "is_authorized": false
    }
}]

注意使用双引号-而不是单引号。请注意使用false而不是False

JavaScript

如果你把它写成一个字符串,你需要用下面的JavaScript结束:

var filteredData  = '[{"model": "participants.participant","pk": 5533,"fields": {"pGUID": "somedata","site_name": "somedata","fb_email": "somedata","is_authorized": false}}]'

请注意,整个字符串都用单引号括起来,以免干扰JSON本身中的双引号。
因此,您需要确保您的JavaScript占位符如下:

filteredData = '{{filtered}}';

我无法评论在Django应用程序中创建{{filtered}}字符串的最佳方式。抱歉我不用Django

演示

但是,一旦您将该字符串正确传递到您的网页,那么您可以如下使用它。在下面的演示中,我只是硬编码字符串,而不是使用{{filtered}}

/*
what the json should look like:
[{
    "model": "participants.participant",
    "pk": 5533,
    "fields": {
        "pGUID": "somedata",
        "site_name": "somedata",
        "fb_email": "somedata",
        "is_authorized": false
    }
}]
*/

// your JSON as a string, provided by Django:
var filteredData = '[{"model": "participants.participant","pk": 5533,"fields": {"pGUID": "somedata","site_name": "somedata","fb_email": "somedata","is_authorized": false}}]';

$(document).ready(function() {
  $('#my-table').DataTable({
    data: JSON.parse(filteredData),
    lengthMenu: [
      [25, 50, 100, -1],
      [25, 50, 100, "All"]
    ],
    pageLength: 50,
    responsive: true,
    processing: true,
    serverSide: false,
    searchable: true,

    columns: [{
        data: "model",
        title: "Model"
      },
      {
        data: "fields.pGUID",
        title: "GUID"
      },
      {
        data: "fields.is_authorized",
        title: "Authorized?"
      }
    ],
  });
});
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

  <div style="margin: 20px;">

    <table id="my-table" class="display dataTable cell-border" style="width:100%">
    </table>

  </div>


</body>

</html>

在上面的代码中,你可以看到如何引用JSON中的不同字段:

data: "model"
data: "fields.pGUID"
data: "fields.is_authorized"

等等
我还添加了title选项,为您的表提供一些头。

另一种选择

我更倾向于使用Django端点来提供正确的JSON(作为JSON,而不是字符串),并使用Ajax data source将其直接提供给DataTable的方法。
但考虑到你的出发点,这可能是更多的工作。
你的方法当然没有错--这是偏好的问题。所以,也许先让你目前的方法发挥作用,然后再决定是否要尝试不同的方法。

9w11ddsr

9w11ddsr2#

我能解决它!序列化筛选模型生成的序列化JSON格式不正确。在将JSON字符串传递到站点之前,我必须将布尔值更改为字符串。我也可以将布尔值改为小写(例如,False -> false),因为JavaScript语法不像Python那样是大写的。

def site(request, site_name):

    site_pguids = Participant.objects.filter(site_name=site_name).all()
    serialized = str(json.loads(serialize('json', site_pguids)))
    serialized = serialized.replace("False", "'False'")
    serialized = serialized.replace("True", "'True'")

    return render(request, 'site.html', context={'site': site_name, 'filtered': serialized})

然后,在我的JavaScript中,我简单地将单引号替换为双引号,它就工作了。

data: JSON.parse(filteredData.replace(/'/g, '"')),
u59ebvdq

u59ebvdq3#

根据你的代码,看起来你快到了。一个问题可能是filteredData作为字符串而不是JavaScript对象传递给JavaScript。
你可以尝试在HTML中使用safe template标签来避免转义字符,并确保JSON被正确解析:

<script>
    filteredData = {{ filtered|safe }};
</script>

另一个潜在的问题是DataTables中的columns选项需要与序列化数据中的实际字段相匹配。假设序列化的数据看起来像这样:

[
  {
    "pk": 1,
    "model": "myapp.participant",
    "fields": {
      "site_name": "Site1",
      "some_data": "Data1"
    }
  }
]

您需要更新DataTables中的columns选项以访问嵌套字段属性,如下所示:

columns: [
  {"data": "fields.some_data"},
],

下面是更新后的JavaScript代码:

$(document).ready(function() {
  $('#my-table').DataTable({
    data: JSON.parse(filteredData),
    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
    pageLength: 50,
    responsive: true,
    processing: true,
    serverSide: false,
    bSearchable: true,

    columns: [
      {"data": "fields.some_data"},
    ],
  });
});

有了这些更改,您的代码就可以按预期工作了。只需确保调整DataTables中的columns选项,以匹配序列化数据的实际结构。

相关问题