Bootstrap DataTable 显示未找到匹配的记录 Django
Bootstap DataTable showing No matching records found Django
我正在用 Django 开发一个项目，用户可以在其中共享文件。我从数据库中检索数据（文件）并将其显示在模板的 table 中，并使用 bootstrap DataTable 在我的 table 中实现搜索功能但是当我从 DataTable 中搜索任何记录时显示 No matching records found.
Bootstrap 数据table CSS CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
Bootstrap 数据table Javascript CDN
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
Bootstrap 显示数据 table 功能的脚本 HTML table
<script>
$(document).ready(function() {
$('#datatable').DataTable();
} );
</script>
模板代码：
{% extends 'instructor/admin_base.html' %}
{% load static %}
{% block body %}
<div id="page-container" >
<main id="main-container">
<div class="content">
<h3 class="text-center notesText">All Notes</h3><br>
`<div class="tablecss container mt-5" ><div >
<!--id="datatable" is used for implementing boostrap dataTable features in table-->
<table id="datatable" class=" table table-bordered table-striped table-vcenter js-dataTable-full-pagination" style=" color:gray;">
<thead style="background-color : #607d8b; color:white;" >
<tr>
<th>S.No</th>
<th>Uploading Date</th>
<th>Branch</th>
<th>Subject</th>
<th>Download Notes</th>
<th>File Type</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</th
{% for i in notes %}
<tbody>
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.uploadingdate}}</td>
<td>{{i.branch}}</td>
<td>{{i.subject}}</td>
<td><a href="{{i.notesfile.url}}" class="btn btn-success" download>Download</a></td>
<td>{{i.filetype}}</td>
<td>{{i.description}}</td>
<td>{{i.status}}</td>
<td><a href="{% url 'dashboard:delete_notes' i.id %}" class="btn btn-danger" onclick="return confirm('Are your sure to Delete ?')">Delete</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>`</div>`
</main>
</div>
Views.py（我想在其中实现搜索功能）
def all_notes(request):
if not request.user.is_authenticated:
return redirect('login_admin')
notes = Upload_Notes.objects.all()
context = {'notes':notes}
return render(request, 'instructor/all_notes.html',context)
dashboard/urls.py:
from django.contrib import admin
from django.urls import path
from . import views
app_name="dashboard"
urlpatterns=[
path('pending_notes', views.pending_notes, name='pending_notes'),
path('assign_status/<int:pk>', views.assign_status, name='assign_status'),
path('accepted_notes', views.accepted_notes, name='accepted_notes'),
path('rejected_notes', views.rejected_notes, name='rejected_notes'),
path('all_notes', views.all_notes, name='all_notes'),
path('admin_home',views.admin_home,name="admin_home"),
path("showallusers", views.show_all_users, name="showallusers"),
]
Models.py
class Upload_Notes(models.Model):
user = models.ForeignKey(User,on_delete=models.CASCADE)
uploadingdate = models.CharField(max_length=30)
branch = models.CharField(max_length=30)
subject = models.CharField(max_length=50)
notesfile = models.FileField(null=True,validators=(validate_file_extension,))
filetype = models.CharField(max_length=30)
description = models.CharField(max_length=200, null=True)
status = models.CharField(max_length=15)
def __str__(self):
return f'{self.user} notes'
delete_notes 查看
def delete_notes(request,pk=None):
if not request.user.is_authenticated:
return redirect('login')
notes = Upload_Notes.objects.get(id=pk)
notes.delete()
messages.success(request,f" Notes delated successfully!")
return redirect('/all_notes')
与 all_notes 一样，我还有其他 3 种显示方法 pending_notes 、accepted_notes 和 rejected_notes.
带有错误消息的模板图片no matching record found
额外：
Datatable 在另一个 table 中运行良好，我向所有用户显示 info.I 我无法找到为什么数据 table 在注释 [=67] 中不起作用的问题=].
你可以简单的勾选Ajax[mdn-reference]，总之ajax给了我们在网页中进行CRUD操作的功能无需重新加载页面。
在您的代码中，您可以通过以下方式实现无需重新加载页面的删除功能：
模板文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div id="page-container" >
<main id="main-container">
<div class="content">
<h3 class="text-center notesText">All Notes</h3><br>
<div class="tablecss container mt-5" ><div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<p class="main-message"></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--id="datatable" is used for implementing boostrap dataTable features in table-->
<table id="datatable" class=" table table-bordered table-striped table-vcenter js-dataTable-full-pagination" style=" color:gray;">
<thead style="background-color : #607d8b; color:white;" >
{% csrf_token %}
<tr>
<th>S.No</th>
<th>Uploading Date</th>
<th>Branch</th>
<th>Subject</th>
<th>Download Notes</th>
<th>File Type</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</th
{% for i in notes %}
<tbody>
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.uploadingdate}}</td>
<td>{{i.branch}}</td>
<td>{{i.subject}}</td>
<td><a href="{{i.notesfile.url}}" class="btn btn-success" download>Download</a></td>
<td>{{i.filetype}}</td>
<td>{{i.description}}</td>
<td>{{i.status}}</td>
<td><button notesid="{{i.id}}" class="btn btn-danger remove-notes">Delete</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div></div>
</main>
</div>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let messageBox =document.getElementsByClassName("alert-success")[0].children[0];
if (messageBox.innerHTML == "") {
console.log(messageBox.parentNode);
messageBox.parentNode.style.display = "none";
}
// main jquery ajax function
$(".remove-notes").click(function () {
confirmation = confirm("Are you sure to delete");
if (confirmation) {
let elm = this;
let id = elm.getAttribute("notesid").toString();
console.log(id);
$.ajaxSetup({
headers: {
"X-CSRFToken": $("[name=csrfmiddlewaretoken]").val(),
},
});
console.log(id);
$.ajax({
type: "POST",
url: "{% url 'dashboard:delete_notes' %}",
data: {
notesid: id,
},
success: function (resp) {
// console.log(status);
// resp means response
console.log("data is coming");
console.log(resp.msg);
elm.parentNode.parentNode.remove();
if (resp.msg != "") {
let messageBox = document.getElementsByClassName("alert-success")[0].children[0];
messageBox.parentNode.style.display = "block";
messageBox.innerHTML = resp.msg;
}
},
error: function (resp) {
console.log(resp);
},
});
}
});
</script>
</body>
</html>
views.py
def all_notes(request):
if not request.user.is_authenticated:
return redirect('login_admin')
notes = Upload_Notes.objects.all()
context = {'notes': notes}
return render(request, 'dashboard/all_notes.html', context)
def delete_notes(request, pk=None):
if request.method == 'POST':
if not request.user.is_authenticated:
return redirect('login')
print(request.POST.get('notesid'))
notes = Upload_Notes.objects.get(id=int(request.POST.get('notesid')))
notes.delete()
return JsonResponse({'msg': 'Notes deleted successfully !'})
urls.py
from django.contrib import admin
from django.urls import path
from . import views
app_name = "dashboard"
urlpatterns = [
path('all_notes/', views.all_notes, name='all_notes'),
path('delete-records/', views.delete_notes, name='delete_notes')
]
我正在用 Django 开发一个项目，用户可以在其中共享文件。我从数据库中检索数据（文件）并将其显示在模板的 table 中，并使用 bootstrap DataTable 在我的 table 中实现搜索功能但是当我从 DataTable 中搜索任何记录时显示 No matching records found.
Bootstrap 数据table CSS CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
Bootstrap 数据table Javascript CDN
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
Bootstrap 显示数据 table 功能的脚本 HTML table
<script>
$(document).ready(function() {
$('#datatable').DataTable();
} );
</script>
模板代码：
{% extends 'instructor/admin_base.html' %}
{% load static %}
{% block body %}
<div id="page-container" >
<main id="main-container">
<div class="content">
<h3 class="text-center notesText">All Notes</h3><br>
`<div class="tablecss container mt-5" ><div >
<!--id="datatable" is used for implementing boostrap dataTable features in table-->
<table id="datatable" class=" table table-bordered table-striped table-vcenter js-dataTable-full-pagination" style=" color:gray;">
<thead style="background-color : #607d8b; color:white;" >
<tr>
<th>S.No</th>
<th>Uploading Date</th>
<th>Branch</th>
<th>Subject</th>
<th>Download Notes</th>
<th>File Type</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</th
{% for i in notes %}
<tbody>
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.uploadingdate}}</td>
<td>{{i.branch}}</td>
<td>{{i.subject}}</td>
<td><a href="{{i.notesfile.url}}" class="btn btn-success" download>Download</a></td>
<td>{{i.filetype}}</td>
<td>{{i.description}}</td>
<td>{{i.status}}</td>
<td><a href="{% url 'dashboard:delete_notes' i.id %}" class="btn btn-danger" onclick="return confirm('Are your sure to Delete ?')">Delete</a></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>`</div>`
</main>
</div>
Views.py（我想在其中实现搜索功能）
def all_notes(request):
if not request.user.is_authenticated:
return redirect('login_admin')
notes = Upload_Notes.objects.all()
context = {'notes':notes}
return render(request, 'instructor/all_notes.html',context)
dashboard/urls.py:
from django.contrib import admin
from django.urls import path
from . import views
app_name="dashboard"
urlpatterns=[
path('pending_notes', views.pending_notes, name='pending_notes'),
path('assign_status/<int:pk>', views.assign_status, name='assign_status'),
path('accepted_notes', views.accepted_notes, name='accepted_notes'),
path('rejected_notes', views.rejected_notes, name='rejected_notes'),
path('all_notes', views.all_notes, name='all_notes'),
path('admin_home',views.admin_home,name="admin_home"),
path("showallusers", views.show_all_users, name="showallusers"),
]
Models.py
class Upload_Notes(models.Model):
user = models.ForeignKey(User,on_delete=models.CASCADE)
uploadingdate = models.CharField(max_length=30)
branch = models.CharField(max_length=30)
subject = models.CharField(max_length=50)
notesfile = models.FileField(null=True,validators=(validate_file_extension,))
filetype = models.CharField(max_length=30)
description = models.CharField(max_length=200, null=True)
status = models.CharField(max_length=15)
def __str__(self):
return f'{self.user} notes'
delete_notes 查看
def delete_notes(request,pk=None):
if not request.user.is_authenticated:
return redirect('login')
notes = Upload_Notes.objects.get(id=pk)
notes.delete()
messages.success(request,f" Notes delated successfully!")
return redirect('/all_notes')
与 all_notes 一样，我还有其他 3 种显示方法 pending_notes 、accepted_notes 和 rejected_notes.
带有错误消息的模板图片no matching record found
额外： Datatable 在另一个 table 中运行良好，我向所有用户显示 info.I 我无法找到为什么数据 table 在注释 [=67] 中不起作用的问题=].
你可以简单的勾选Ajax[mdn-reference]，总之ajax给了我们在网页中进行CRUD操作的功能无需重新加载页面。
在您的代码中，您可以通过以下方式实现无需重新加载页面的删除功能：
模板文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div id="page-container" >
<main id="main-container">
<div class="content">
<h3 class="text-center notesText">All Notes</h3><br>
<div class="tablecss container mt-5" ><div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<p class="main-message"></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--id="datatable" is used for implementing boostrap dataTable features in table-->
<table id="datatable" class=" table table-bordered table-striped table-vcenter js-dataTable-full-pagination" style=" color:gray;">
<thead style="background-color : #607d8b; color:white;" >
{% csrf_token %}
<tr>
<th>S.No</th>
<th>Uploading Date</th>
<th>Branch</th>
<th>Subject</th>
<th>Download Notes</th>
<th>File Type</th>
<th>Description</th>
<th>Status</th>
<th>Action</th>
</tr>
</th
{% for i in notes %}
<tbody>
<tr>
<td>{{forloop.counter}}</td>
<td>{{i.uploadingdate}}</td>
<td>{{i.branch}}</td>
<td>{{i.subject}}</td>
<td><a href="{{i.notesfile.url}}" class="btn btn-success" download>Download</a></td>
<td>{{i.filetype}}</td>
<td>{{i.description}}</td>
<td>{{i.status}}</td>
<td><button notesid="{{i.id}}" class="btn btn-danger remove-notes">Delete</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div></div>
</main>
</div>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
let messageBox =document.getElementsByClassName("alert-success")[0].children[0];
if (messageBox.innerHTML == "") {
console.log(messageBox.parentNode);
messageBox.parentNode.style.display = "none";
}
// main jquery ajax function
$(".remove-notes").click(function () {
confirmation = confirm("Are you sure to delete");
if (confirmation) {
let elm = this;
let id = elm.getAttribute("notesid").toString();
console.log(id);
$.ajaxSetup({
headers: {
"X-CSRFToken": $("[name=csrfmiddlewaretoken]").val(),
},
});
console.log(id);
$.ajax({
type: "POST",
url: "{% url 'dashboard:delete_notes' %}",
data: {
notesid: id,
},
success: function (resp) {
// console.log(status);
// resp means response
console.log("data is coming");
console.log(resp.msg);
elm.parentNode.parentNode.remove();
if (resp.msg != "") {
let messageBox = document.getElementsByClassName("alert-success")[0].children[0];
messageBox.parentNode.style.display = "block";
messageBox.innerHTML = resp.msg;
}
},
error: function (resp) {
console.log(resp);
},
});
}
});
</script>
</body>
</html>
views.py
def all_notes(request):
if not request.user.is_authenticated:
return redirect('login_admin')
notes = Upload_Notes.objects.all()
context = {'notes': notes}
return render(request, 'dashboard/all_notes.html', context)
def delete_notes(request, pk=None):
if request.method == 'POST':
if not request.user.is_authenticated:
return redirect('login')
print(request.POST.get('notesid'))
notes = Upload_Notes.objects.get(id=int(request.POST.get('notesid')))
notes.delete()
return JsonResponse({'msg': 'Notes deleted successfully !'})
urls.py
from django.contrib import admin
from django.urls import path
from . import views
app_name = "dashboard"
urlpatterns = [
path('all_notes/', views.all_notes, name='all_notes'),
path('delete-records/', views.delete_notes, name='delete_notes')
]