Python+Django+JQ easyui实现数据表格分页展示(基于前后端不分离)

前文

  在用Django写web时，有时就仅仅需要从数据库查询出数据，然后在前端展示，但是又要分页，涉及的前后端还是蛮多的，这边介绍基础的html+Django以及用JQ的easyui框架+Django来实现基础的表格分页展示。

table+Django

  Django的后端代码相对简单很多，逻辑就是从数据库取出数据，然后用Django自带的paginator进行分页(因为Django的paginator对象封装了获取上一页和下一页的方法，所以可以在模版轻松使用)，这边结合代码来说明。

from django.core.paginator import Paginator, Page, EmptyPage, PageNotAnInteger 
#从Django自带的paginator模块插入类
contact_list = models.objects.all() #这边的model指代数据表
paginator = Paginator(contact_list, 20) #20是每页显示的数量，把数据库取出的数据生成paginator对象，并指定每页显示的数量
page = request.GET.get('page') #从查询字符串获取page的当前页数
if page: #判断：获取当前页码的数据集，这样在模版就可以针对当前的数据集进行展示
    data_list = paginator.page(page).object_list
else:
    data_list = paginator.page(1).object_list
try:  #实现分页对象，分别判断当页码存在/不存在的情况，返回当前页码对象
    page_object = paginator.page(page)
except PageNotAnInteger:
    page_object = paginator.page(1)
except EmptyPage:
    page_object = paginator.page(paginator.num_pages)
return render(request, "websql/usersqllog.html", {
    'page_object':page_object,
    'data_list':data_list
}) #返回给模版当前页码对象和当前页码的数据集

  这边后端代码基本实现了，用基础的html+css来实现一个简陋的数据表格呈现：

    
    



    
        返回首页
    
    

        

            {% for data in data_list %}
                
            {% endfor %}

        

            

                
ID
                
Name
                
ip
                
time
            

                    
{{ data.id }}
                    
{{ data.name }}
                    
{{ data.ip }}
                    
{{ data.time }}
                
        

            {% if page_object.has_previous %}
                

                «
                
            {% endif %}

           {% for pg in page_object.paginator.page_range %}
            {% if page_object.number == pg %}
            
{{ pg }}
            {% else %}
            
{{ pg }}
            {% endif %}
            {% endfor %}
            {% if page_object.has_next %}
                

                    »
            {% endif %}
        
    

  做完后，出现的表格大概是这样的：

  数据都是测试的数据，如果要实现一个简单的表格展示，那上面这种就够用了(给自己看，就不用在意那么多了)。关于模版的table就是简单的html，就不多说了，关于page的切换，就是利用了page对象的previous_page_number(上一页)、next_page_number (下一页)、paginator.page_range(页数范围)，当页面点击对应的页码时，就通过if判断当前的页码，找到了则跳转对应的页面，同时通过url发给django后端，再对应的从数据库取出数据。

easyui+Django

  用table实现的页面实在有点拿不出手，这时候可以考虑用easyui来实现，关于easyui的入门教程：easyui入门。这边简单用easyui的datagrid来实现表格显示:

    
    
    
    
    
    



    

        返回首页
    
    

    
        {% for data in data_list %}
            
        {% endfor %}
        

        

            

                
序号
                
用户名
                
访问的ip地址
                
访问时间
            
        
        

                
{{ data.id }}
                
{{ data.name }}
                
{{ data.ip }}
                
{{ data.time }}
            

    
    
    

        

            {% if page_object.has_previous %}
                

                «
                
            {% endif %}

           {% for pg in page_object.paginator.page_range %}
            {% if page_object.number == pg %}
            
{{ pg }}
            {% else %}
            
{{ pg }}
            {% endif %}
            {% endfor %}
            {% if page_object.has_next %}
                

                    »
            {% endif %}
        
    

表格如下：

  相对来说，表格和按钮都做了一定的优化，并且这样的表格可以支持滚轮，当然还有很多datagrid的特性，感兴趣的同学可以去了解，这边的实现就是基于纯html+css，而不用js，实际上datagrid的实现配合js可以有更多强大的功能。这边要注意的是，在easyui的table的tr里的field一定要和下方data的引用字段互相呼应，当时没注意到这点，导致数据一直显示不出来～

总结

  关于easyui的JQ框架，我也在不断的入门学习，datagrid的很多强大的功能也有待发掘～