Python 使用Flask对json数据进行分页

我使用flask并生成填充了我检索的JSON数据的表。我现在的问题是，我需要对所有JSON数据进行分页，因为每页的最大值设置为“50”，我希望显示表中的所有产品

到目前为止，我不能让它工作，我真的不知道如何让它与烧瓶工作。我尝试使用while循环，但这对Jinja2不起作用，因为无法识别该命令

这是我的Python代码：

@app.route('/products',methods = ['POST', 'GET'])
def products():
    shopnaam = request.form['shopname'] 
    username = request.form['username']
    password = request.form['password']
    login = 'https://'+shopnaam+'example.com'
    url = 'https://'+shopnaam+'.example.com/admin/products.json'

    payload = {
          'login[email]': username,
          'login[password]': password
          }

    with requests.Session() as session:
          post = session.post(login, data=payload)

          r = session.get(url)
          parsed = json.loads(r.text)


    return render_template('producten.html',parsed = parsed)

这是我的Jinja2代码：

<button class="collapsible">Bekijk product Informatie</button>
<div class="content">
<table id = "productentabel">
  <tr class = "header">
    <th>ID</th>
    <th>Titel </th>
    <th>Prijs Exclusief BTW</th>
    <th>Prijs Inclusief BTW</th>
    <th>Datum</th>

    {% for product in parsed['products'] %}
    <TR>
    <TD  width="100px" >{{product['id']}}</TD>
    <TD  width="300px" >{{product['nl']['title']}}</TD>
    <TD  width="150px">{{product['price_excl']}}</TD>
    <TD  width="150px">{{product['price_incl']}}</TD>
    <TD  width="300px">{{product['created_at']}}</TD>
    </TR>
    </tr>
    {% endfor %}
    </table>

<input class = "exportknop" value="Exporteer product informatie" type="button" onclick="$('#productentabel').table2CSV({header:['ID','Titel','Prijs Exclusief BTW', 'Prijs Inclusief BTW', 'Datum']})">     
</div>

因此，链接是分页发生的地方，我在我的Python代码中尝试了以下内容，并使用这些内容在我的Python终端中打印所有值。只是我无法将数据发送到表中

while url:
        with requests.Session() as session:
            post = session.post(login, data=payload)
            r = session.get(url)
            parsed = json.loads(r.text)
            for product in parsed['products']:
                print(product['id'], product['nl']['title'])
            url = 'https://example/admin/products' + parsed['links']['next']  

---

所以这里有两件事要考虑。首先，在websocket或异步调用之外，使用生成器创建web内容几乎是不可能的。原因是WSGI在呈现之前需要所有数据。然后它关闭连接。您可以生成数据，但在表中，这将导致原始html出现问题

怎么办：

我将使用datatables.net之类的工具将表数据馈送到变量中，并让datatables为您处理分页

使用引导4和数据表的示例

<script>
var dataSet = []
var wurl = ""

tablex = $('#tablex').dataTable( {
    select: true,
    stateSave: true,
    colReorder: true,
    deferRender: true,
    "oLanguage": {"sSearch": "Filter:"},
    columns: [
        { title: "Number" },
        { title: "Client Name" },
        { title: "Opened" },
        { title: "Closed" },
        { title: "Worked" }
    ]
} );

function generate() {
$.get(wurl, function( data ) {
  dataSet = data;
  tablex.fnDestroy();
  tablex = $('#tablex').dataTable( {
    data: dataSet,
    select: true,
    stateSave: true,
    colReorder: true,
    deferRender: true,
    "oLanguage": {"sSearch": "Filter:"},
    columns: [
        { title: "Number" },
        { title: "Client Name" },
        { title: "Opened"},
        { title: "Closed"},
        { title: "Worked"}
    ],
} );
});
};

$(document).ready(function() {
wurl = '/api/getdata';
generate()
} );

</script>

我首先只建立一个基表，然后调用一个API并在后台用数据加载该表。如果需要，您甚至可以进行此轮询并在一定时间间隔内刷新数据集。API只是在列输出中传递原始数据

在本例中，您的表id是tablex。

---

您的API路由可以是任何内容，只是以列和行格式输出的返回值

你好@eatmeiamdanish谢谢你的回答。所以我必须从python发送给这个脚本的唯一值是url？还是别的？这是一个普通的例子。显然，您会用自己的名字设置列。但是您所要做的就是让api，在本例中，“/api/getdata”返回列表的json列表，这意味着您将返回列表中的行。Datatables将完成其余的分页。Datatables还提供自己的服务器端分页，但这会变得复杂。页面上的每个按钮都会向查询发送一个偏移量和一个限制，但是如果您进行筛选，这会发生变化，因此您也必须考虑到这一点。为了简单起见，如果您的行数少于10万行，请在启用deferrender的情况下使用客户端。我已经感觉到这会变得有点太复杂。因此，我采用了另一种解决方案，首先将数据推送到数据库，然后检索数据。感谢您推荐Datatables，我现在正在使用它：如果您需要任何可能对您有帮助的其他代码，请随时私下与我联系。我有一大堆经过时间考验的工具，可以简化复杂的问题。

<script>
var dataSet = []
var wurl = ""

tablex = $('#tablex').dataTable( {
    select: true,
    stateSave: true,
    colReorder: true,
    deferRender: true,
    "oLanguage": {"sSearch": "Filter:"},
    columns: [
        { title: "Number" },
        { title: "Client Name" },
        { title: "Opened" },
        { title: "Closed" },
        { title: "Worked" }
    ]
} );

function generate() {
$.get(wurl, function( data ) {
  dataSet = data;
  tablex.fnDestroy();
  tablex = $('#tablex').dataTable( {
    data: dataSet,
    select: true,
    stateSave: true,
    colReorder: true,
    deferRender: true,
    "oLanguage": {"sSearch": "Filter:"},
    columns: [
        { title: "Number" },
        { title: "Client Name" },
        { title: "Opened"},
        { title: "Closed"},
        { title: "Worked"}
    ],
} );
});
};

$(document).ready(function() {
wurl = '/api/getdata';
generate()
} );

</script>