Упорядочение таблиц DataTable не выполняется при использовании в адаптивной таблице HTMX. ⇐ Jquery

[Anonymous]

Я пробовал несколько способов создания адаптивных таблиц, и мне нравится подход htmx. Проблема, с которой я столкнулся, заключается в том, что я теряю некоторые функции DataTables, на которые я полагался, в основном возможность сортировки пользователем, щелкнув заголовок.
Views.py:
class HomePageView(TemplateView):
template_name = 'wwdb/home_tabletest.html'

class WinchOperatorForm(forms.ModelForm):
class Meta:
model = WinchOperator
exclude = []

def get_winchoperator_list(request):
context = {}
context['winchoperator'] = WinchOperator.objects.all()
return render(request, 'wwdb/winchoperator_list.html', context)

def add_winchoperator(request):
context = {'form': WinchOperatorForm()}
return render(request, 'wwdb/add_winchoperator.html', context)

def add_winchoperator_submit(request):
context = {}
form = WinchOperatorForm(request.POST)
context['form'] = form
if form.is_valid():
context['winchoperator'] = form.save()
else:
return render(request, 'wwdb/add_winchoperator.html', context)
return render(request, 'wwdb/winchoperator_row.html', context)

def add_winchoperator_cancel(request):
return HttpResponse()

def delete_winchoperator(request, winchoperator_pk):
winchoperator = WinchOperator.objects.get(pk=winchoperator_pk)
winchoperator.delete()
return HttpResponse()

def edit_winchoperator(request, winchoperator_pk):
winchoperator = WinchOperator.objects.get(pk=winchoperator_pk)
context = {}
context['winchoperator'] = winchoperator
context['form'] = WinchOperatorForm(initial={
'firstname':winchoperator.firstname,
'lastname': winchoperator.lastname,
'status': winchoperator.status,
'username': winchoperator.username,
})
return render(request, 'wwdb/edit_winchoperator.html', context)

def edit_winchoperator_submit(request, winchoperator_pk):
context = {}
winchoperator = WinchOperator.objects.get(pk=winchoperator_pk)
context['winchoperator'] = winchoperator
if request.method == 'POST':
form = WinchOperatorForm(request.POST, instance=winchoperator)
if form.is_valid():
form.save()
else:
return render(request, 'wwdb/edit_winchoperator.html', context)
return render(request, 'wwdb/winchoperator_row.html', context)


Я могу опубликовать дополнительные шаблоны, если потребуется, но шаблон, определяющий таблицы:




First Name
Last Name
Status
Username
test
test


{% for winchoperator in winchoperator %}

{{ winchoperator.firstname }}
{{ winchoperator.lastname }}
{{ winchoperator.status }}
{{ winchoperator.username }}















{% endfor %}




























hx-target="this"
hx-swap="innerHTML"
hx-get="{% url 'get_winchoperator_list' %}"
hx-trigger="load delay:1s">




Класс данных, о котором я говорю, находится в моем файле base.py, который загружен в шаблон.

$(document).ready(function () {
$('table.display').DataTable({
autoWidth: false,
scrollX: true
});
// Listen for Bootstrap tab activation event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the DataTable instance of the active tab
var activeTable = $($(e.target).attr('href')).find('table').DataTable();
// Adjust columns when the tab becomes active
activeTable.columns.adjust().draw();
});
});


Я использовал следующее руководство, чтобы достичь того, что я имею сейчас. Учебник мне понравился, но я хочу найти способ интегрировать его в уже имеющиеся у меня таблицы.
https://medium.com/@duytran2310/django- ... dd8417c36a


Подробнее здесь: https://stackoverflow.com/questions/786 ... sive-table