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>

  • 相关阅读:
    使用Struts时,JSP中如何取得各个会话中的参数值?
    JUnit —— TestSuite 的使用
    如何修改 Ubuntu 的字符集?
    如何修改 VIM 制表符的空格数?
    最遥远的距离
    二分法求平方根(Python实现)
    Hadoop 学习之路之MapReduce原理
    JDK 1.8源码阅读 TreeMap
    JDK 1.8源码阅读 HashMap
    JDK 1.8源码阅读 HashSet
  • 原文地址:https://www.cnblogs.com/manqian/p/10764790.html
Copyright © 2011-2022 走看看