zoukankan      html  css  js  c++  java
  • 排序功能

    布局

    <thead>
    <tr>
        <th>ID</th>
        <th>标题</th>
        <th>浏览人次&nbsp;<i data-type="user_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>浏览数&nbsp;<i data-type="browse_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>真实点赞&nbsp;<i data-type="zan_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>虚假点赞&nbsp;<i data-type="fake_zan_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>前端点赞数&nbsp;<i data-type="show_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>三分之一离开&nbsp;<i data-type="1_3_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>三分之二离开&nbsp;<i data-type="2_3_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>阅读完离开&nbsp;<i data-type="3_3_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>转发次数&nbsp;<i data-type="transpond_num" class="fa fa-sort sort" style="cursor: pointer;"></i></th>
        <th>标签</th>
    </tr>
    </thead>
    

    埋藏变量

    <input type="hidden" name="sort_name" id="sort_name" value="{$sort_name}" />
    <input type="hidden" name="sort_type" id="sort_type" value="{$sort_type}" />
    

    触发

    function get_search(){
        var type = $("#type").val();
        var title = $("#title").val();
        var search_str = '';
    
        if(type) search_str +='&type=' + type;
        if(title) search_str +='&title=' + title;
    
        return search_str;
    }
    
    $("#search").on('click',function () {
        var search_str = get_search();
        window.location.href = '__URL__/news?page=' + 1 + search_str;
    });
    
    $(".sort").on('click',function() {
        let search_str = get_search();
        let type_name = $(this).data('type');
        let sort_name = $('#sort_name').val();
        let sort_type = $('#sort_type').val();
        if (type_name == sort_name) {
            if (!sort_type || sort_type == 'asc') {
                sort_type = 'desc';
            } else {
                sort_type = 'asc';
            }
        } else {
            sort_type = 'desc';
        }
    
        search_str +='&sort_name=' + type_name + '&sort_type=' + sort_type;
        window.location.href = '__URL__/news?page=' + 1 + search_str;
    });
    

    数据处理

    if (!empty($_GET['sort_name']) && !empty($_GET['sort_type'])) {
        $sort_name = trim($_GET['sort_name']);
        $sort_type = trim($_GET['sort_type']);
        $this->assign('sort_name', $sort_name);
        $this->assign('sort_type', $sort_type);
        $order = $sort_name.' '.$sort_type;
    }
    
    $result_list = $newsModel->where($where)->limit($start . ',' . $step)->field('*,zan_num+fake_zan_num show_num')->order($order)->select();
    
    
  • 相关阅读:
    vue2.0路由-适合刚接触新手简单理解
    JAVA实现DES加密实现详解
    计算机网络: IP地址,子网掩码,网段表示法,默认网关,DNS服务器详解
    vue-自定义组件传
    mybatis 乐观锁和逻辑删除
    axios 全攻略之基本介绍与使用(GET 与 POST)
    PowerDesigner使用教程
    scala slick mysql utf8mb4 支持
    spring-boot jpa mysql emoji utfmb4 异常处理
    花生壳的ddns 关键时刻又掉链子,准备迁到阿里万网
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/11284558.html
Copyright © 2011-2022 走看看