title: DataTables server-side processing - echoing back draw() parameter (Python/Flask)
body: <p>I'm using DataTables to display data from MySQL. It worked fine, until I was forced to use server-side processing (100k rows). Now, when I load the table in the browser, it works fine until I use some feature of DataTables (search, column sorting..). When I click on e.g. column name, all I got is "Processing..." message.</p>
  
  <p>I noticed, that with every click on the table, the draw is raised by 1 in the XMLHttpRequest, but my 'draw' is still set to 1 in my code.</p>
  
  <p>My definition of draw, recordsTotal, recordsFiltered in python/flask code(shortened):</p>
  
  <pre><code>tick = table.query.all()
  rowsCount = table1.query.count()
  
  x = {'draw':1,'recordsTotal':rowsCount,'recordsFiltered':10}
  y = dict(data=[i.serialize for i in tick])
  z = y.copy()
  z.update(x)
  
  @app.route("/api/result")
  def result_json():
      return jsonify(z)
  
  @app.route('/data')
  def get_data():
      return render_template('data.html')
  </code></pre>
  
  <p>My JSON:</p>
  
  <pre><code>{
    "data": [
      {
        "first": "Anton",
        "id": 1,
        "last": "Spelec"
      },
      {
        "first": "Rosamunde",
        "id": 2,
        "last": "Pilcher"
      },
      {
        "first": "Vlasta",
        "id": 3,
        "last": "Burian"
      },
      {
        "first": "Anton",
        "id": 4,
        "last": "Bernolak"
      },
      {
        "first": "Willy",
        "id": 5,
        "last": "Wonka"
      }
    ],
    "draw": 1,
    "recordsFiltered": 5,
    "recordsTotal": 5
  }
  </code></pre>
  
  <p>My html page with DataTables inicialisation:</p>
  
  <pre><code>&lt;script&gt;
  
          $(document).ready(function() {
             $('#table_id').DataTable( {
                "processing": true,
                "serverSide": true,
                "paging": true,
                "pageLength": 10,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "ajax": {
                 url: 'api/result',
                  },
                columns: [
                 { "data": "id" },
                 { "data": "first" },
                 { "data": "last" }
                  ]
             } );
          } );
  
  &lt;/script&gt;
   &lt;table id="table_id"&gt;
                  &lt;thead&gt;
                          &lt;tr&gt;
                                  &lt;th&gt;id&lt;/th&gt;
                                  &lt;th&gt;first&lt;/th&gt;
                                  &lt;th&gt;last&lt;/th&gt;
                          &lt;/tr&gt;
                  &lt;/thead&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>The XHR is here:</p>
  
  <blockquote>
    <p>Request URL:
    <a href="http://10.10.10.12/api/result?draw=7&amp;columns%5B0%5D%5Bdata%5D=id&amp;columns%5B0%5D%5Bname%5D=&amp;columns%5B0%5D%5Bsearchable%5D=true&amp;columns%5B0%5D%5Borderable%5D=true&amp;columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&amp;columns%5B1%5D%5Bdata%5D=first&amp;columns%5B1%5D%5Bname%5D=&amp;columns%5B1%5D%5Bsearchable%5D=true&amp;columns%5B1%5D%5Borderable%5D=true&amp;columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&amp;columns%5B2%5D%5Bdata%5D=last&amp;columns%5B2%5D%5Bname%5D=&amp;columns%5B2%5D%5Bsearchable%5D=true&amp;columns%5B2%5D%5Borderable%5D=true&amp;columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&amp;order%5B0%5D%5Bcolumn%5D=0&amp;order%5B0%5D%5Bdir%5D=asc&amp;start=0&amp;length=10&amp;search%5Bvalue%5D=asdf&amp;search%5Bregex%5D=false&amp;_=1536075500781" rel="nofollow noreferrer">http://10.10.10.12/api/result?draw=7&amp;columns%5B0%5D%5Bdata%5D=id&amp;columns%5B0%5D%5Bname%5D=&amp;columns%5B0%5D%5Bsearchable%5D=true&amp;columns%5B0%5D%5Borderable%5D=true&amp;columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&amp;columns%5B1%5D%5Bdata%5D=first&amp;columns%5B1%5D%5Bname%5D=&amp;columns%5B1%5D%5Bsearchable%5D=true&amp;columns%5B1%5D%5Borderable%5D=true&amp;columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&amp;columns%5B2%5D%5Bdata%5D=last&amp;columns%5B2%5D%5Bname%5D=&amp;columns%5B2%5D%5Bsearchable%5D=true&amp;columns%5B2%5D%5Borderable%5D=true&amp;columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&amp;columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&amp;order%5B0%5D%5Bcolumn%5D=0&amp;order%5B0%5D%5Bdir%5D=asc&amp;start=0&amp;length=10&amp;search%5Bvalue%5D=asdf&amp;search%5Bregex%5D=false&amp;_=1536075500781</a></p>
  </blockquote>
  
  <p><a href="http://The%20draw%20counter%20that%20this%20object%20is%20a%20response%20to%20-%20from%20the%20draw%20parameter%20sent%20as%20part%20of%20the%20data%20request.%20Note%20that%20it%20is%20strongly%20recommended%20for%20security%20reasons%20that%20you%20cast%20this%20parameter%20to%20an%20integer,%20rather%20than%20simply%20echoing%20back%20to%20the%20client%20what%20it%20sent%20in%20the%20draw%20parameter,%20in%20order%20to%20prevent%20Cross%20Site%20Scripting%20(XSS)%20attacks." rel="nofollow noreferrer">DataTables documentation</a> advises to cast this parameter to an integer and send it back.
  I found similar <a href="https://stackoverflow.com/questions/36269684/datatables-server-side-processing-draw-parameter">question</a> about draw parameter and it supposed the same, but unfortunately I'm not able to make it work. Casting the parameter to integer would not be a problem, I think, but I'm lost in what to do with it next or how to push the raised draw parameter to my JSON.</p>
  
  <p>Thank you.</p>