三）django实现查询，分页，批量删除

不会翻墙的泰隆

已于 2022-06-15 09:49:00 修改

阅读量1.2k

点赞数 1

分类专栏： Django 文章标签： django python 前端

于 2022-05-11 11:35:26 首次发布

本文链接：https://blog.csdn.net/fun_sn/article/details/124704200

版权

Django 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

前景回顾
从登录到加密，好像太基础了大家都会，看来是我多虑了。那接下来我们讲解本系列核心内容，不管什么类型网站，都要用到查询，所以写好一个查询页是多么重要！

泰隆从实践中得出为方便用户使用，该有的功能我们一样都不能少，不然后续头疼的还是自己。美观和实用我们都要，下面由我为大家详细说一说
在这里插入图片描述

1.前端(前端很废，一部分是借鉴)

1.1.1 select.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/non-responsive/">
    <!-- Bootstrap core CSS -->
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    
    <link href="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/examples/non-responsive/non-responsive.css" rel="stylesheet">

    <script src="https://fastly.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.35/assets/js/ie-emulation-modes-warning.js"></script>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        li{
            font-family: 楷体;
            font-weight: bold;
            font-size: large;
        }
        body{
        position:relative;min-height:100vh;padding-top:50px;background-color:#f7f7f7;background-image:url(https://assets.shimonote.com/static/lizard-service-form-sdk/assets/bg.8b0775af.png);background-position:bottom;background-repeat:no-repeat;background-size:100% auto;background-attachment:fixed;box-sizing:border-box;
        }
        #date {
          width: 1100px;
          height: 50px;
          border: 0px solid #FFF;
          margin-left: 650px;
          margin-top: 46px;
        }

        #startTime {
          float: left;
          margin-left: 0px;
         background: #FFFFFF;

        }

        #endTime {
          float: left;
          margin-left: 30px;
          background: #FFFFFF;
        }

        #TimeRight{
            float: right;
            background: #FFFFFF;
        width: 20px;
        height: 50px;
        }

        input[type="date"] {
          width: 158px;
          height: 50px;
          border: none;
          line-height: 1;
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;

          padding-left: 14px;
          font-size: 1rem;
          color: #525C66;
          outline: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            padding-right:-00px;

        }

        input[type="date"]::-webkit-inner-spin-button {
          visibility: hidden;
        }
        input[type="date"]:after {}

        input[type="date"]::-webkit-calendar-picker-indicator {
          /*这是控制下拉小箭头的*/
          border: 0px solid #ccc;
          border-radius: 0px;
          /*  box-shadow: inset 0 1px #fff, 0 1px #eee; */
          color: #FFF;

          /* width: 0px;
          height: 0px; */
        }
        .Time {

          width: 80px;
          height: 50px;
          background: #FFFFFF;
          float: left;
        }
       	#TimeFont {
          font-size: 14px;
          color: #8F9DB3;
          float: left;
          margin-left: 20px;
          margin-top: 15px;
        }
        .btn{
            margin: 20px;
            margin-top: 10px;
            color: black;
        }
                table{
            width: 100%;
            border-collapse: collapse;
        }

        table caption{
            font-size: 2em;
            font-weight: bold;
            margin: 1em 0;
        }

        th,td{
            border: 1px solid #999;
            text-align: center;
            padding: 20px 0;
        }

        table thead tr{
            background-color: #54b8e0;
            color: #fff;
        }

        table tbody tr:nth-child(odd){
            background-color: #eee;
        }

        table tbody tr:hover{
            background-color: #ccc;
        }

        table tbody tr td:first-child{
            color: #f40;
        }

        table tfoot tr td{
            text-align: right;
            padding-right: 20px;
        }
        .pagination {
            margin-left: 500px;
        }

  </style>
</head>
<body>
    <div class="col-md-6">
        <form method="get" >
                <span class="Title-sc-1mzy06h zSLAk"><span class="Star-sc-13z6qta beXybp"></span>
                <div id="date">
                    <div id="startTime">
                        <div class="Time" ><span id="TimeFont">开始时间</span></div>
                        <input type="date" name="start_date" style="">
                        <div id="TimeRight"></div>
                    </div>
                    <div id="endTime">
                        <div class="Time" ><span id="TimeFont">结束时间</span></div>

                        <input type="date" name="end_date">
                        <div id="TimeRight"></div>
                    </div>
                    <input class="InputStyled-sc-zjp96d btn" id ="btn" value="查询" type="submit">
                </div>
                </span>
        </form>
 	          <table class="table table-bordered" style="margin:1px 500px;">
            <thead>
            <tr>
                <th width="25"><input type="checkbox" id="checkAll"  onclick="checkAll()"></th>
                <td>ID</td>
                <td>销售</td>
                <td>日期</td>
                <td>价格</td>
                <td>销量</td>
                <td>销售额</td>
                <td></td>
            </tr>
            </thead>
            <tbody>
            {% for data in all_data %}
                <tr>
                	<td><input type="checkbox" onclick="checkOne()" value="{{data.id}}" name="item"></td>
                    <td>{{ data.id }}</td>
                    <td>{{ data.username }}</td>
                    <td>{{ data.date }}</td>
                    <td>{{ data.pirce }}</td>
                    <td>{{ data.sales }}</td>
                    <td>{{ data.volume}}</td>
                    <td> <a onclick="return confirm('确认要删除？')" href="{% url 'del_data' %}?id={{ data.id }}">删除</a> </td>
                </tr>
            {% endfor %}
            </tbody>
            <tfoot>
                <td colspan="13"><a href="excel" style="margin-left: 500px">导出全部数据</a></td>
            </tfoot>
    </table>
    </div>

1.2.1 批量删除
1.2.2 删除按钮

            <div style="margin: 10px 500px">
                <a onclick="getValues()" href="" class="btn btn-danger input-sm">批量删除</a>
            </div>

1.2.3 复选框(全选)
点击为全选，反之取消

            <tr>
                <th width="25"><input type="checkbox" id="checkAll"  onclick="checkAll()"></th>
            </tr>

1.2.3 复选框(单选)

                <tr>
                	<td><input type="checkbox" onclick="checkOne()" value="{{data.id}}" name="item"></td>
                </tr>

1.2.4 绑定按钮点击删除（js实现）

    <script>
        function checkAll() {
            var all = document.getElementById("checkAll");

            if (all.checked == true) {
                var ones = document.getElementsByName("item");
                for (var i = 0; i <= ones.length; i++) {
                    ones[i].checked = true;
                }
            } else {
                var ones = document.getElementsByName("item");
                for (var i = 0; i <= ones.length; i++) {
                    ones[i].checked = false;
                }
            }
        }

        function checkOne() {
            var one=document.getElementsByName("item");
            one.checked=true;
        }

        function getValues() {
        var valArr=[];
        var ones=document.getElementsByName('item');
        for (var i=0;i<ones.length;i++){
            if (ones[i].checked==true){
                valArr[i]=ones[i].value
            }
        }
        if (valArr.length!=0){
            $.ajax({
                url:"{% url 'del_all' %}",　　　　　　
                type:'POST',
                contenType:'application/json',　　　　　　
                traditional:true,　　　　　　
                async: false,
                data:{
                    'ids':valArr
                },
                success:function(){
                    alert("删除成功");
                },
                error:function(){
                    alert("删除失败");
                }
            })
        }
        else {
            var error_m="请选择数据";
            alert(error_m);
        }
    }
    </script>

1.2.1 分页显示

        <div>
            <ul class="pagination">
            <li><a href="{% url 'sel_data' %}?start_date={{ context.start_date }}&end_date={{ context.end_date }}&page=1">首页</a></li>
                 {% if all_data.has_previous %}
                        <li><a href="{% url 'sel_data' %}?start_date={{ context.start_date }}&end_date={{ context.end_date }}&page={{ all_data.previous_page_number }}">上一页</a></li>
                {% endif %}

                {% if all_data.has_next %}
                     <li><a href="{% url 'sel_data' %}?start_date={{ context.start_date }}&end_date={{ context.end_date }}&page={{ all_data.next_page_number }}">下一页</a></li>
                {% endif %}
                <li><a href="{% url 'sel_data' %}?start_date={{ context.start_date }}&end_date={{ context.end_date }}&page={{ all_data.paginator.num_pages }}">尾页</a></li>
                <li>
                     总页数: {{ all_data.paginator.num_pages }}
                </li>
             </ul>
        </div>

2.后端(视图+路由)

2.1.1 查询分页，注意：分页的时候要把前端传过来的参数，再从后端返回给前端，参数一定要传递，不然后续分页是空数据，很多同学在这里都会踩坑
在这里插入图片描述

views.py

def select(request):
    user_id1 = request.session.get('user_id')
    # 使用user_id去数据库中找到对应的user信息
    userobj= Users.objects.filter(id=user_id1)
    username = userobj[0]
    start_date = request.GET.get('start_date')
    end_date = request.GET.get('end_date')
    all_data = Django.objects.filter(date__range=(start_date,end_date),username=username).all().order_by('date')
    limit = 10
    paginator = Paginator(all_data, limit)  # 按每页10条分页
    page = request.GET.get('page', '1')  # 默认跳转到第一页
    result = paginator.page(page)
    context = {} #空集合
    context['start_date'] = start_date
    context['end_date'] = end_date 
    return render(request, 'select.html', {'all_data': result,"user":userobj[0],'context':context}) #参数传递给前端

urls.py

urlpatterns = [
    path('login/next_step/select/',views.select,name='sel_data'),
]

2.2.1 批量删除
views.py

def curd_delete_all(request):
    #先判断发过来的是否是post请求
    if request.method=="POST":
        #得到要删除的id列表
        ids = request.POST.getlist('ids')
        idstring = ','.join(ids)
        Django.objects.extra(where=['id IN (' + idstring + ')']).delete()
        #删除成功返回查询页
        messages.success(request, '删除成功！')
        return redirect('/login/next_step/select')

urls.py

urlpatterns = [
    path('login/next_step/select/del_all/',views.curd_delete_all,name='del_all'),
]

*有任何问题都可以私信泰隆，看到都会回复。
本文章若对你有帮助，烦请点赞，收藏，关注支持一下
各位的支持和认可就是我最大的动力

不会翻墙的泰隆

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录