Question

到目前为止，我使用Flask / Jinja分页，例如描述here的示例（请参阅页面导航章节）。这很好用，除非现在我在使用分页过程时（即点击下一个/上一个链接时）我的（主要）页面需要不重新加载。我想要修改一个<div>（数据来自SQLAlchemy的数据库，不确定它是否重要）。

然后我测试了Ajax调用以尝试在页面中获取一些动态内容（例如在this example中）。这对于基本情况也很好（加载div等......）。

我的问题是到目前为止我还无法混合他们，即 flask / Jinja分页+ ajax动态刷新<div> 。我在网上发现了一些非常接近但事实并非如此（特别是涉及Flask / Jinja）。

我想知道，当点击＆＃34; next / prev page＆＃34; ：

/index/<int:page>

有没有人会：

一个（完整的/详细的）关于如何处理上述内容的例子？
或替代解决方案？

顺便说一句，我测试了 Flask-paginate 。不幸的是，它似乎正在重新加载页面。

感谢。

Answer 1

已经过去了一年，所以对您来说可能没有用，但是我遇到了同样的问题，这就是我如何解决同样的问题。也许会帮助某人。

我将跳过AJAX的核心部分，仅描述如何弄清将flask-sqlalchemy分页与jquery AJAX调用混合：

因此，假设我有一条用于索引和结果的路由。我从模板生成索引页，然后在表单中添加事件以发布输入数据，然后使用jquery AJAX调用（不是典型的JSON文件）获取 html结果

现在的问题是：如何将新的页面参数传递给呼叫？

我发现：使用url_for 作为查询字符串包含页码，然后使用jquery从页面链接获取href属性，然后将其传递给AJAX呼叫网址

这是代码关键部分的样子：

Jinja / HTML（仅负责结果和页面链接生成的部分）：

          {% for result in results%}
                <div>{{ result.name }}</div
          {% endfor %}

          {% for page in restaurants.iter_pages() %}
                <a class="page-link" href="{{ url_for('search_results', page=page) }}">{{ page }}</a>
          {% endfor %}

JQuery脚本（仅负责从页面链接调用ajax的部分）：

  $(document).ready(function() {

    $(document).on('click', '.page-link', function(event) {

      var link = $(this).attr('href');
      searchResults(link);
      event.preventDefault();

  });
});

  var searchResults = function(link) {
      req=$.ajax({
        data : {
          parameter1: $('input[name="parameter1"]').val()
        },
        type: 'POST',
        url: link

      });
      req.done(function(data) {
        $('#results').html(data);
      })
  };

烧瓶：

@app.route('/index', methods=['GET', 'POST'])
def mainPage():
    return render_template("index.html")

@app.route('_search_results', methods=['GET', 'POST'])
def searchResults():
    page = request.args.get('page')
    page = 1 if page == None else int(page)
    user_parameter = request.form['parameter1'].lower()
    results = Item.query.filter(Item.parameter == user_parameter).paginate(page=page)

    return render_template("results.html", results=results)

Answer 2

我已完成以下操作来解决此问题：

在我的python代码中。
1.我正在使用Pagination.items提取页面的项目。
2.我正在使用Pagination.iter_pages（..）提取页码列表。并将两者都作为json响应发送。

@app.route('/filter', defaults={'page_num':1}, methods=['get'])
@app.route('/filter/<int:page_num>', methods=['get'])
def filter(page_num):
    if request.method=='GET':
        filter_criteria = request.args.get("query")

        if filter_criteria != "":
            like_filter_criteria = "%" + filter_criteria + "%"
            search_results = db.session.query(Data).filter(or_(Data.mobile1.like(like_filter_criteria),
            Data.mobile2.like(like_filter_criteria),
            Data.mobile3.like(like_filter_criteria))).filter(and_(Data.active_status == "Y")).order_by(Data.name)
        else:
            search_results = fetch_all_details()

        if search_results != None:
            paginationObj = search_results.paginate(per_page=3,page=page_num,error_out=True)
            num_list = []
            for i in paginationObj.iter_pages(left_edge = 3, right_edge = 3, left_current = 3, right_current = 3):
                num_list.append(i)
            return jsonify({'json_list' : [i.serialize for i in paginationObj.items],
            'pages_lst' : num_list})

用我的JavaScript ..
1.我正在访问通常在每个页面上显示的项目的值

    function get_cust_data(pageNum){
      var formData = {'query': $('input[name=query]').val()}

        $.ajax({
            url: '/filter' + pageNum,
            data: formData,
            type: 'GET',
            success: function(response) {
                console.log(response);
                show_data_in_table(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    }

    function show_data_in_table(response){
        var new_tbody = document.createElement('tbody');
        new_tbody.setAttribute("id","tbody");
        var data = response['json_list'];
        var page_numbers = response['pages_lst'];

        var cust_data = '';
        $.each(data, function(key, value){
          cust_data += '<tr>';
          cust_data += '<td>' + value.name + '</td>';
          cust_data += '<td>' + value.mobile1 + '</td>';
          cust_data += '<td>' + value.mobile2 + '</td>';
          cust_data += '<td>' + value.mobile3 + '</td>';
          cust_data += '<td>' + value.address + '</td>';
          cust_data += '<td>' + '<a href='+ Flask.url_for('index',{'id':value.id, 'action':'edit'}) +'>Edit</a></td>';
          cust_data += '<td>' +
          '<form id="frm_delete" action="'+ Flask.url_for('delete_cust') +'" method="post" role="form">' +
            '<input type="hidden" name="id_to_delete" id="id_to_delete" value="'+ value.id + '">' +
            '<a href="#" id="btn_delete">Delete</a>' +
          '</form>' + '</td>';
          cust_data += '</tr>';
        });
        new_tbody.innerHTML = cust_data;
        var old_tbody = document.getElementById('tbody');
        old_tbody.parentNode.replaceChild(new_tbody, old_tbody);

        show_page_numbers(page_numbers);

    }

并以相同的方式访问页码列表。

    function show_page_numbers(page_numbers){
      var new_links_box = document.createElement('div');
      new_links_box.setAttribute("id","paginationBox");

      var anchorTags = '';
      for (var i = 0; i < page_numbers.length; i++){
        var item = page_numbers[i] === null ? ellipsis : page_numbers[i] ;
        anchorTags += '<a href='+ Flask.url_for('filter') + ' id="page_num_link">'+ item +'</a> &nbsp;&nbsp;&nbsp;';
      }
      new_links_box.innerHTML = anchorTags;
      var old_links_box = document.getElementById('paginationBox');
      old_links_box.parentNode.replaceChild(new_links_box,old_links_box);
    }

然后，我使用一些不错的旧js来访问用户单击的页码，并将其发送给我的ajax调用，该调用也会在页面加载时被调用。

$("#datalist").on("click","#paginationBox #page_num_link", function(e){
        e.preventDefault();
        var page = '/' + $(e.target).html();
        if(page != ellipsis){
            get_cust_data(page);
        }
      });

这就是我的模板的样子。它基本上什么都没有，因为一切都是动态的。

          <table id="body_tbl">
            <thead>
              <tr>
                <th>Name</th>
                <th>mobile 1</th>
                <th>mobile 2</th>
                <th>mobile 3</th>
                <th>Address</th>
                <th>Edit</th>
                <th>Delete</th>
               </tr>
           </thead>
           <tbody id="tbody">
           </tbody>
          </table>

          <div id="paginationBox">
          </div>

使用此功能，在分页功能正常工作时，链接单击事件不会加载页面。希望这会有所帮助。

混合Flask / Jinja分页与刷新部分页面内容（div）（不是整页）

2 个答案: