What is a good way to filter a model and display that as a table in Django?

I have been struggling on finding a simple method for displaying a filtered model on a Django webpage. I am using DataTables for my tables.

Here is some code for my view that filters a value and creates a serialized json. I am not sure of another method to do this, but intuitively it made sense to transform the filtered model and send it over to the webpage in the 'context' parameter.

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

Here's my 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"},
        ],
      
    } );
} );

And here's where I pass the in the filteredData variable in my HTML:

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

This does not work as I am not really sure how DataTables handles JSON files. I presume that the solution is simple, but I am quite new to Django. Thank you!

I was able to solve it! The serialized JSON that is generated from serializing a filtered model is not the correct format. I had to change my booleans to strings before I passed the JSON string to my site. I could have also changed the booleans to lowercase (e.g., False -> false) since JavaScript syntax is uncapitalized unlike 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})

Then, in my JavaScript I simply replaced the single quotes with double quotes and it worked.

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

Given your starting point, the least amount of work for you is probably as follows:

The JSON Data

Your JSON string is as follows (based on a comment in another answer):

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

But that is not a string containing valid JSON.

Valid JSON would be this:

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

Note the use of double-quotes - not single quotes. Note the use of false not False.

The JavaScript

If you write this as a string, you need to end up with the following JavaScript:

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

Note that the entire string is enclosed in single quotes, so as to not interfere with the double-quotes inside the JSON itself.

You therefore need to ensure your JavaScript placeholder is this:

filteredData = '{{filtered}}';

I can't comment on the best way for you to create that {{filtered}} string in your Django app. Sorry, I don't use Django.

A Demo

But once you have that string correctly passed to your web page, then you can use it as follows. In the following demo, I have just hard coded the string, instead of using {{filtered}}:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

/*
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?"
      }
    ],
  });
});

<!-- language: lang-html -->

<!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>

<!-- end snippet -->

In the above code, you can see how to refer to the different fields in your JSON:

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

...and so on.

I added the title options as well, to give your table some headers.

An Alternative

I would prefer the approach where you have a Django endpoint which serves the correct JSON (as JSON, not as a string) and provides that directly to the DataTable using an Ajax data source.

But that is probably more work, given your starting point.

There is certainly nothing wrong with your approach - it's a matter of preference. So, maybe get your current approach working first, and then decide if you want to try a different approach, after that.