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>

  • 相关阅读:
    C Socket编程之Connect超时 (转)
    【c#】设置Socket连接、接收超时(转)
    socket测试远程地址能否连接并为连接设置超时(转)
    ZedGraph右键菜单怎样禁止它弹出(转)
    赚钱本身就是人生目的
    如果一个女人喜欢你,又不跟你在一起,而且只跟你很暧昧,那代表什么
    LayoutInflater的使用
    Android应用程序的生命周期
    Android的系统服务一览
    Android系统服务-简介
  • 原文地址:https://www.cnblogs.com/manqian/p/10764790.html
Copyright © 2011-2022 走看看