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

最新推荐文章于 2023-10-21 07:52:06 发布

sandwu

最新推荐文章于 2023-10-21 07:52:06 发布

阅读量3.2k

点赞数 1

分类专栏： Django 文章标签： python Django easyui datagrid

本文链接：https://blog.csdn.net/weixin_42681866/article/details/85010630

版权

Django 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前文

在用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来实现一个简陋的数据表格呈现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Titlename</title>
</head>
<style>
    ul{
        list-style: none;
        margin:0px;
        padding:0px;
        width:auto;
    }
    ul li{
        float:left;
        margin-top:10px;
        padding:10px;
        border-style: solid;
        border:1px solid;
    }
</style>
<body>
    <a href="{% url 'index' %}">
        <button>返回首页</button>
    </a>
    <div>
        <table border="1" cellspacing="1" cellpadding="1" >
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>ip</th>
                <th width="200px">time</th>
            </tr>

            {% for data in data_list %}
                <tr>
                    <td>{{ data.id }}</td>
                    <td>{{ data.name }}</td>
                    <td>{{ data.ip }}</td>
                    <td width="200px">{{ data.time }}</td>
                </tr>
            {% endfor %}

        </table>
        <ul class="pagination">
            {% if page_object.has_previous %}
                <li>
                <a href="?page={{ page_object.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                </li>
            {% endif %}

           {% for pg in page_object.paginator.page_range %}
            {% if page_object.number == pg %}
            <li class="active"><a href="?page={{ pg }}">{{ pg }}</a></li>
            {% else %}
            <li><a href="?page={{ pg }}">{{ pg }}</a></li>
            {% endif %}
            {% endfor %}
            {% if page_object.has_next %}
                <li>
                    <a href="?page={{ page_object.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
            {% endif %}
        </ul>
    </div>

</body>
</html>

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

easyui+Django

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titlename</title>
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/easyui/themes/icon.css">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/easyui/jquery.easyui.min.js"></script>
</head>
<style>
    ul{
        list-style: none;
        margin:0px;
        padding:0px;
        width:auto;
    }
    ul li{
        float:left;
        margin-top:10px;
        padding:10px;
        border-style: solid;
        border:1px solid;
    }
</style>
<body class="easyui-layout" style="font-size:14px;">
    <div style="padding:5px;background:#fafafa;width:200px;border:1px solid #ccc;margin-left: 10px">
        <a href="{% url 'index' %}" class="easyui-linkbutton" data-options="iconCls:'icon-back'">返回首页</a>
    </div>
    <div style="margin-left:10px;">
    <table id="dg" class="easyui-datagrid" title="Titlename" style="width:1000px;height:560px"
            data-options="singleSelect:true,collapsible:true">
        <thead>
            <tr>
                <th field="id" width="50px">序号</th>
                <th field="name" width="100px">用户名</th>
                <th field="address_ip" width="200px">访问的ip地址</th>
                <th field="create_time" width="400px">访问时间</th>
            </tr>
        </thead>
        <tbody>
        {% for data in data_list %}
            <tr>
                <td width="50px">{{ data.id }}</td>
                <td width="100px">{{ data.name }}</td>
                <td width="100px">{{ data.ip }}</td>
                <td width="400px">{{ data.time }}</td>
            </tr>
        {% endfor %}
        </tbody>

    </table>
    </div>
    <div style="margin-left:10px;">
        <ul class="pagination">
            {% if page_object.has_previous %}
                <li>
                <a href="?page={{ page_object.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                </li>
            {% endif %}

           {% for pg in page_object.paginator.page_range %}
            {% if page_object.number == pg %}
            <li class="active"><a href="?page={{ pg }}">{{ pg }}</a></li>
            {% else %}
            <li><a href="?page={{ pg }}">{{ pg }}</a></li>
            {% endif %}
            {% endfor %}
            {% if page_object.has_next %}
                <li>
                    <a href="?page={{ page_object.next_page_number }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
            {% endif %}
        </ul>
    </div>
</body>
</html>

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

总结

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

sandwu

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
Python+Django+JQ easyui实现数据表格分页展示(基于前后端不分离)

前文在用Django写web时，有时就仅仅需要从数据库查询出数据，然后在前端展示，但是又要分页，涉及的前后端还是蛮多的，这边介绍基础的html+Django以及用JQ的easyui框架+Django来实现基础的表格分页展示。table+Django Django的后端代码相对简单很多，逻辑就是从数据库取出数据，然后用Django自带的paginator进行分页(因为Django的pag...
复制链接

扫一扫