Show More Data Button In A List Of Posts Django

I'm practicing with Django making a web with data about LoL with the Riot API. There is a page where you can see the game history of a searched player. I'm trying to create a butto

Solution 1:

You have to use Ajax. Use two views: the main view will send the data to display your first picture. The second will just send the data needed for you table. In your template, when you will click "Show summary", you will call asynchronously the second view, and then when the data will be received, you will update the template using JS; I advice JQuery with Django.

Example with a single data:

<divid="game-{{game.id}}"><buttononclick="loadGameData({{game.id}})">Show game summary</button><tablestyle="display: none"><thead><tr><thscope="col">Game Mode</th></tr></thead><tbody><tr><tdclass="game-mode"></td></tr></tbody></table></div><scripttype="text/javascript">functionloadGameData(gameId) {
        $.ajax({
            url: "{% url 'game-data' %}",
            method: "GET",
            error: function(xhr, status, error) {
                alert("Server error");
            },
            success: function(gameData){
                gameData.games.forEach(game => {
                    $('#game-'+gameId+' tbody').append('<tr><td>'+game.gameMode'+</td></tr>')
                )}
                $('#game-'+gameId).show()
            }
        });
    }
</script>

In your new view:

defgetGameData(request):
    return JsonResponse({
        'gameMode': 'battle'
    })