個人django ajax分頁記錄,,只有代碼,,後面說明慢慢補充
該代碼可以直接複製,效果在最後,更高級的之後更新
前提:
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
url:
url("ajax/$",views.ajax,name='ajax'),
views:
from django.shortcuts import render
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from app01.models import all_classification
def ajax(request):
all=all_classification.objects.all() #換成自己的表對象
paginator = Paginator(all, 15)
page = request.POST.get('page')
print(page)
try:
rows = paginator.page(page)
except PageNotAnInteger:
rows = paginator.page(1)
except EmptyPage:
rows = paginator.page(paginator.num_pages)
return render(request,'ajax_page.html', {'rows': rows})
html:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script type="text/javascript">
function next(){
{% if rows.has_next %}
page={{ rows.next_page_number }};
{% endif %}
$.ajax({
type:"POST",
url:"{% url 'ajax' %}",
data:{"page":page},
success:function(data){
$("#jobs_table").html(data);
}
})
}
function pre(){
{% if rows.has_previous %}
page={{ rows.previous_page_number }};
{% endif %}
$.ajax({
type:"POST",
url:"{% url 'ajax' %}",
data:{"page":page},
success:function(data){
$("#jobs_table").html(data);
}
})
}
</script>
</head>
<body id="jobs_table">
<table> /* 這裏調整自己數據庫中查出來的對象 */
<tr>
<td>一級列表</td>
<td>二級列表</td>
<td>三級列表</td>
</tr>
{% for i in rows %}
<tr>
<td>{{ i.primary_name }}</td>
<td>{{ i.secondary_name }}</td>
<td>{{ i.three_level_name }}</td>
</tr>
{% endfor %}
</table>
<ul class="pagination">
{% if rows.has_previous %}
<li class="page-item">
<a class="page-link" onclick='pre()' href="javascript:void(0)">上一頁</a>
</li>
{% else %}
<li class="page-item disabled"><span class="page-link">Previous</span></li>
{% endif %}
{% if rows.has_next %}
<li class="page-item">
<a class="page-link" onclick="next()" href="javascript:void(0)" >下一頁</a>
</li>
{% else %}
<li class="page-item disabled"><span class="page-link">Next</span></li>
{% endif %}
</ul>
</body>
</html>
setting:
#靜態文件放的位置
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
效果: