html，JS实现分页，仅使用bootstrap前端和django后端_python

html，JS实现分页，仅使用bootstrap前端框架

先看简陋的成品：

前端：

页面刚加载时，判断是否为第一页和最后一页，如果是第一页，则不可往前翻页；如果是最后一页，不可往后翻页。代码如下。

<body onload="load()">
......
</body>

<script>
    function load(){
        if (1 == parseInt({{ page_num }})){
            var new_node = document.createElement("span")
            new_node.setAttribute("class","page-link")
            new_node.appendChild(document.createTextNode("Previous"))
            document.getElementById("previous").parentNode.replaceChild(new_node,document.getElementById("previous"))
        }
        if (parseInt({{ page_num }}) == parseInt({{ total_page }})){
            var new_node = document.createElement("span")
            new_node.setAttribute("class","page-link")
            new_node.appendChild(document.createTextNode("Next"))
            document.getElementById("next").parentNode.replaceChild(new_node,document.getElementById("next"))
        }
    }

</script>

在nav标签中构建列表，表示页码与前翻、后翻。但是连接在html中写起来不方便，所以在js中写连接。代码如下。

<div>
	<table>
	......
	</table>
   <div class="col-sm-offset-9">
                <nav aria-label="Page navigation example">
                    <ul class="pagination" id="ul">
                        <li class="page-item "><span class="page-link" href="javascript:;">第{{ page_num }}页</span></li>
                        <li class="page-item"><a class="page-link" href="javascript:;" onclick="PreviousPage()" id="previous">Previous</a></li>
                        <li class="page-item"><a class="page-link" href="javascript:;" onclick="NextPage()" id="next">Next</a></li>
                    </ul>
                </nav>
    </div>
</div>

<script>
    function PreviousPage() {
        var page_num = parseInt({{ page_num }})
        page_num -= 1
        {#alert(page_num)#}
        window.location.href = "/QuizApp/Show_Paper?page_num="+encodeURI(page_num)
    }
    function NextPage(){
        var page_num = parseInt({{ page_num }})
        page_num += 1
        {#alert(page_num)#}
        window.location.href = "/QuizApp/Show_Paper?page_num="+encodeURI(page_num)
    }
</script>

后端

使用了django框架，通过django.core.paginator分页器完成分页。
代码如下。

def Show_Paper(request):
# 在数据库中查找数据
    if(request.method == 'GET'):
    try:
        Paper_List = Paper.objects.all()
	except:
		print('数据库访问呢异常')
		context - {
			'result':'failed,
		}
		return HttpResponse(context=context)
		
    if(request.method == 'POST'):
        searchPaper = request.POST['searchPaper']
        try:
            Paper_List = Paper.objects.filter(name__icontains=searchPaper)
        except:
            print('搜索失败，未搜索到有关试卷')
            
# 将数据分页
    page_num = request.POST.get('page_num',1)
    page_size = 10
    # 创建分页器
    paginator = Paginator(Paper_List,page_size)
    try:
      #   每一页所要展示的内容
      page_list =  paginator.page(page_num)
    except:
	  context={
	         'result':'empty page'
	     }
        return HttpResponse(json.dumps(context))
    # 总页数
    total_page = paginator.num_pages
    context={
        'result':'success',
        'page_list':page_list,
        'page_size':page_size,
        'total_page':total_page,
        'page_num':page_num,
    }
    return render(request, 'Paper/ShowPaper.html', context)```

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/870812.html

html，JS实现分页，仅使用bootstrap前端和django后端

发表评论

评论列表（0条）