django ajax分頁記錄(完整)

個人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'),
)  

效果:

在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章