Django admin: how to add Save button to the top of list view

user_9035706 0
Viewed 2024

When there are list editable fields, a Save button appears at the bottom in Django admin list view. (Surrounded with a red box in the picture). enter image description here

How to add the same Save button to the top as well? (The expected result is surrounded with a green box in the picture.)

For object change view Django provides a simple solution, but there seems to be no built-in option for list view.

django-admin django
2 Answers

This can easily be done with JavaScript.

First we need a JS function, which would find the Save button row from the bottom of the page and insert a copy to the top. In my case it lives in static/common/js/save-buttons-to-list-view-top.js.

'use strict'
var $ = django.jQuery

$(document).ready(function () {
  var saveButtonRow = $('.paginator')[0]
  var resultsDiv = $('#changelist-form > div.results')[0]

  if (saveButtonRow && resultsDiv) {
    $(saveButtonRow).clone().insertBefore(resultsDiv);
  }
})

This script needs to be added to all admin change list views by overriding the change_list.html template.

Create a file templates/admin/change_list.html with the following content:

{% extends 'admin/change_list.html' %}
{% block extrahead %}
{{ block.super }}
<script type="text/javascript" src="/static/media/common/js/save-buttons-to-list-view-top.js"></script>
{% endblock %}

To make this work, check whether you have configured template options in settings.py:

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
        'APP_DIRS': True,
        ...
    }
]
user_90357060

As noted in the comments my original answer was wrong. To get it in the list view override the changelist.html of your model with a file that contains the following:

{% extends "admin/change_list.html" %}

    {% load admin_list %}

{% block result_list %}
    {% pagination cl %}
    {{ block.super }}
{% endblock %}

Just for reference. There is the option ModelAdmin.save_on_top (docs)

user_30912630
Related