Question

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

到目前为止，我还无法正常工作，我也不知道如何与Flask一起使用。我尝试了使用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>

如您所见，我正在使用for循环，此代码有效，但分页是问题。

我的JSON看起来像这样：

products: [
{
article_code: "123",
barcode: "456",
brand_id: 2600822,
created_at: "2018-05-31T15:15:34+02:00",
data01: "",
data02: "",
data03: "",
delivery_date_id: null,
has_custom_fields: false,
has_discounts: false,
has_matrix: false,
hits: 0,
hs_code: null,
id: 72660113,
image_id: null,
is_visible: false,
price_excl: 33.0165,
price_incl: 39.95,
price_old_excl: 0,
price_old_incl: 0,
product_set_id: null,
product_type_id: null,
search_context: "123 456 789",
shop_id: 252449,
sku: "789",
supplier_id: 555236,
updated_at: "2018-05-31T15:15:34+02:00",
variants_count: 1,
visibility: "hidden",
weight: 0,

links: {
first: ".json",
last: ".json?page=70",
prev: null,
next: ".json?page=2",
count: 3497,
limit: 50,
pages: 70
}

因此链接是进行分页的地方，我在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']

Answer 1

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

做什么：

我将使用诸如datatables（datatables.net）之类的东西将您的表数据馈入一个变量，并让datatables为您处理分页。

使用Bootstrap 4和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>

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

在此示例中，您的表ID为“ tablex”。
您的API路由可以是任何值，也可以是列和行格式的输出返回值。

使用Flask通过JSON数据分页

1 个答案: