zoukankan      html  css  js  c++  java
  • 分页

    1、引入分页插件样式
    <link rel="stylesheet" href="../static/css/jquery.pagination.css">
    2、引入jquery分页插件
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../static/js/jquery.pagination.min.js"></script>

    3、应用分页插件
    <div class="box">
    <div id="pagination" class="page"></div>
    </div>

    <script>
    $(function() {
    $("#pagination").pagination({
    // data.current_pag 当前页
    currentPage: {{data.current_page}},
    // data.total_page 总页数
    totalPage: {{data.total_page}},
    // 点击页码所执行的函数
    callback: function(current) {
    var keyword = $(".input_txt").val()
    window.location.href="http://127.0.0.1:5000/admin/newsreview?page="+current
    }
    });
    });
    </script>

    4、后台逻辑
    # 分页查询方式 使用paginate ,参数1:想要的页码 参数2:每页显示的条数
    news_list = News.query.filter(News.title.like('%' + keyword + '%')).paginate(page, 2, False)

    5、组织数据
    # 数据
    d = {}
    d['newslist'] = news_list.items # 经过筛选的新闻列表
    d['current_page'] = news_list.page # 当前页
    d['total_page'] = news_list.pages # 总页数

    @admin_blue.route('/fenye',methods=['GET','POST'])
    def fenye():
    page = request.args.get('page',1,type=int) #获取配置
    category = Category.query.filter().paginate(page,2,False) #按分页查询数据
    d = {}
    d['news'] = category.items #数据在items里
    d['current_page'] = category.page #当前页
    d['total_page'] = category.pages #总页
    return render_template('fenye.html',data=d)

    <table border="1">
    <tr>
    <td>序号</td>
    <td>名称</td>
    </tr>
    {% for i in data.news %}
    <tr>
    <td>{{ loop.index }}</td>
    <td>{{ i.name }}</td>
    </tr>
    {% endfor %}
    </table>
    <div class="box">
    <div id="pagination" class="page"></div>
    </div>

    <script>
    $(function() {
    $("#pagination").pagination({
    // data.current_pag 当前页
    currentPage: {{data.current_page}},
    // data.total_page 总页数
    totalPage: {{data.total_page}},
    // 点击页码所执行的函数
    callback: function(current) {
    var keyword = $(".input_txt").val()
    window.location.href="http://127.0.0.1:5000/admin/fenye?page="+current
    }
    });
    });
    </script>

  • 相关阅读:
    go语言与区块链
    git+jenkins
    cicd
    devops
    Go 并发
    Thinkphp5-未定义数据库类型
    用golang写爬虫
    kubernetes-通过VMware搭建k8s集群遇到的问题
    亚马逊全球开店2019
    kafka命令大全
  • 原文地址:https://www.cnblogs.com/manqian/p/10764790.html
Copyright © 2011-2022 走看看