Моя таблица данных, использующая js в django, работает очень медленно, когда я загружаю более 50000 строк

**Моя модель: **

class PartyMaster(models.Model):
    party_name = models.CharField(max_length=200,null=True, blank=True)
    email = models.EmailField(null=True, blank=True)
    contact = models.CharField(max_length=100,null=True, blank=True)
    address = models.CharField(max_length=350,null=True, blank=True)
    country = models.CharField(max_length=30,null=True, blank=True)
    sub_country = models.ForeignKey(CountryCategory,max_length=200,on_delete=models.CASCADE,null=True,blank=True,related_name='party_sub_country')
    state = models.CharField(max_length=50,null=True, blank=True)
    city = models.CharField(max_length=50,null=True, blank=True)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.party_name + " "+ self.email

Мое представление: В моей модели есть около 50000+ строк

def party_list(request):
    parties = PartyMaster.objects.all()
    context = {
        'parties':parties,
    }
    return render(request,'party_master/party_edit.html',context)

**Мой шаблон: **

Помогите кто-нибудь, как я могу загрузить данные через обработку на стороне сервера. Я запутался в том, как это реализовать, используя помощь в документации. Пожалуйста, предоставьте полную реализацию с нуля.

Есть ли какая-нибудь альтернатива, которую вы можете мне предложить?

Заранее спасибо :)

При работе с большими наборами данных с таблицами данных вы хотите избежать использования итерации на уровне TR и вместо этого установить атрибут данных в определении DataTable.

https://mail.datatables.net/forums/discussion/32107/how-to-load-an-array-of-json-objects-to-datatables

Вы можете сделать это, создав объект JSON в теге script, а затем итерируя партии и создавая JSON.

Данные отображаются быстрее, если источник данных определен таким образом.

Другим способом может быть использование AJAX на стороне сервера (https://datatables.net/examples/data_sources/ajax), однако большинство примеров, которые вы найдете для этого, используют PHP.

Для вашего кода это будет что-то вроде этого:

<script>
let data = [
{% for party in parties %}
    {
      "party_name": "{{ party.party_name }}",
      "email": "{{ party.email }}",
      "contact": "{{ party.contact }}",
      "country": "{{ party.country }}",
      "country_category": "{{ party.sub_country.country_category }}"
    }{% if not forloop.last %},{% endif %}
{% endfor %}
];

    $(document).ready(function() {
        $('#party_table').DataTable( {
            dom: 'Bfrtip',
            "pageLength": 50,
            buttons: [
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    }
                },
            ],
            data: data,
            columns: [
                { data: 'party_name'},
                { data: 'email'},
                { data: 'contact'},
                { data: 'country'},
                { data: 'country_category'}
            ]
        } );
    } );
</script>

Итак, в первой части вы определяете структуру JSON, затем передаете ее в конфигурацию datatables через параметр data, затем используете параметр columns, чтобы указать порядок, в котором использовать данные

Для помощи в отладке и просмотра того, какие записи из вашей БД подхвачены, используйте этот вариант, который отобразит PK записи в источнике, чтобы вы могли сверить ее с БД

<script>
let data = [
{% for party in parties %}
    {
      /* PK={{ party.pk }} */
      "party_name": "{{ party.party_name }}",
      "email": "{{ party.email }}",
      "contact": "{{ party.contact }}",
      "country": "{{ party.country }}",
      "country_category": "{{ party.sub_country.country_category }}"
    }{% if not forloop.last %},{% endif %}
{% endfor %}
];

    $(document).ready(function() {
        $('#party_table').DataTable( {
            dom: 'Bfrtip',
            "pageLength": 50,
            buttons: [
                {
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    }
                },
                {
                    extend: 'pdfHtml5',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4 ]
                    }
                },
            ],
            data: data,
            columns: [
                { data: 'party_name'},
                { data: 'email'},
                { data: 'contact'},
                { data: 'country'},
                { data: 'country_category'}
            ]
        } );
    } );
</script>
Вернуться на верх