'flask pagination doesn' work with the search option in table

I'm working on the flask pagination, when i try to achieve it, the page 1 has the data, but when i try to do the second page i get data in bytes as show in below. Can anyone please help me to solve this. Below is my code

app.py

@app.route('/')
def index():
    cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor) 
    return render_template('index.html')

@app.route("/fetchrecords",methods=["POST","GET"])
def fetchrecords():
    per_page = 10
    page = request.args.get(get_page_parameter(), type=int, default=1)
    offset = (page - 1) * per_page
    cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
    if request.method == 'POST':
         query = request.form['query']
         cur.execute("SELECT * FROM emp ORDER BY pid")
         res = cur.fetchall()
         for i in res:
            total +=float(i['salary'])
         numrows = int(cur.rowcount)             
         cur.execute("SELECT * FROM emp ORDER BY pid DESC LIMIT %s, %s", (per_page, offset))
         res = cur.fetchall()
         if query == '':
             cur.execute("SELECT * FROM emp ORDER BY pid")
             total = cur.fetchall() 
             numrows = int(cur.rowcount)      
             cur.execute("SELECT * FROM emp ORDER BY pid DESC LIMIT %s, %s", (per_page, offset))
             res = cur.fetchall()     
             pagination = Pagination(page=page, per_page=per_page, offset=offset, total=len(total))                                           
        else:
             search_text = request.form['query']
             cur.execute("SELECT * from emp WHERE name LIKE '%{}%' OR title LIKE '%{}%' OR pid LIKE '%{}%' ORDER BY pid".format(search_text,search_text,search_text))
             res = cur.fetchall() 
             for i in res: 
                 total +=float(i['salary'])
             numrows = int(cur.rowcount) 
             pagination = Pagination(page=page, per_page=per_page, offset=offset, total=len(total), record_name='res')
   elif request.method == 'GET':
        cur.execute("SELECT * FROM emp ORDER BY pid")
        total = cur.fetchall()
        per_page = 25 
        page = request.args.get(get_page_parameter(), type=int, default=1)      
        offset = (page - 1) * per_page
        pagination = Pagination(page=page, per_page=per_page,total=len(total), 
                    css_framework='bootstrap4')   
        numrows = int(cur.rowcount)
        cur.execute("SELECT * FROM emp ORDER BY pid DESC LIMIT %s, %s", (per_page, offset))
        res = cur.fetchall()    
         
  return jsonify({'htmlresponse': render_template('response.html', res=res, numrows=numrows, total=total,pagination=pagination)})

index.html

<body>
    <div class="container">
    <div class="search-box">
         <div class="row">
                <div class="col-md-3">
                    <h5>Search All Fields</h5>
                </div>
                <div class="col-md-9">
                    <input type="text" name="search_text" id="search_text" class="form-control" placeholder="Search all fields "/>
                </div> 
            </div>
    </div>
        <div style="clear:both"></div>
        <br />
        <div class="result">
      </div>           
    </div>
<script>
$(document).ready(function(){
  load_data();
   function load_data(query='')
   {
    $.ajax({
        url:"/fetchrecords",
        method:"POST",
        data:{query:query},
        success:function(data)
        { 
            $('.result').html(data);
            $('.result').append(data.htmlresponse);
        }
    })
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != ''){
load_data(search);
}else{
 load_data();
 }
  });
 });
  </script>
 </body>

response.html

<h4>Total : {{numrows}} </h4></tr>
<table class="table table-striped table-bordered">
<thead>
    <tr>
      ..Table header.. 
    </tr>
</thead>
{% for row in res %}  
   <tr>  Data base values here...</tr>
{% endfor %}
</table>
{{pagination.links}}

result i get as here below, i dont get the data render into table in the page 2 onwards

{"htmlresponse":"<table><tr><h4> Total 91 </h4></tr><table class=\"table table-striped table- 
bordered\">\n                    <thead>\n                        <tr>\n                            
\u00a0<th>name</th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                 
<th>Id</th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                 
<th>Title</th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0                                        
</tr>\n                    </thead>\n  \n<tr>\n\t\n  \u00a0<td>name</td>\n\u00a0\u00a0\u00a0\u00a0<td>01</td>\n\u00a0\u00a0\u00a0\u00a0<td>title</td>\n

\n\n \n\n\t\n \u00a0

Anyone could help me to solve this .I'm open to new approach of pagination also. Thanks you all in advance

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'flask pagination doesn' work with the search option in table

Sources

Related Questions