如何显示用户定义的表单字段数？

Question

我创建了一个使用 HTML 和 Jinja2 配置 CSV 文件的表单。要求用户更改名称并为每个列名称分配一个类型。 CSV文件可以有任意数量的列，因此，我通过循环创建了表单目前，我使用引导网格并根据列数分为三列和三行。

<form action="/updateFile" method="POST" enctype="multipart/form-data">
    <div class="row">
        <div class="col-sm-12">
            <p class="form-group">
                {% for x in title %}
                    {% if loop.index == 1 %} <div class="row"> {% endif %}
                    <div class="col-xs-12 col-sm-12 col-lg-4 col-md-4">
                        <div class="row">
                            <div class="col-sm-6">
                                <label> Field {{ loop.index }} : {{ x }} </label>
                                <input type="text"  title="Name should only contain letters or numbers" class="form-control"
                                name="field-{{ loop.index }}" value="{{ x }}" maxlength="10" pattern="[a-zA-Z0-9_ ]+" required>
                            </div>
                            <div class="col-sm-6 pull-right">
                                <label>&nbsp;</label>
                                <select class="form-control " name="choice-{{ loop.index }}">
                                    <option value="mcqsr">MCQ-Single Response</option>
                                    <option value="mcqmr">MCQ-Multiple Response</option>
                                    <option value="num">Numerical</option>
                                    <option value="tim">Temporal</option>
                                    <option value="lat">Survey Site - Latitude</option>
                                    <option value="lng">Survey Site - Longitude</option>
                                    <option value="temp">Survey Site - Temporal</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <label>&nbsp;</label>
                                <input type="text"  title="Name should only contain letters or numbers" class="form-control"
                                name="question-{{ loop.index }}" value=" Question of {{ x }}" pattern="[a-zA-Z0-9_ ]+" required>
                            </div>
                        </div>
                    </div>
                    {% if loop.index % 3 == 0 %} </div><p>&nbsp;</p><p>&nbsp;</p><div class="row"> {% endif %}
                    <input type="hidden" name="title-{{ loop.index }}" value= {{x}}>
                {% endfor %}
            </div>
        </div>
    <div class="row">
        <div class="col-sm-12 text-center">
            <input type="hidden" name="filename" value= {{filename}}>
            <input type="hidden" name="numofField" value= {{numofField}}>
            <button class="btn btn-primary" type="submit" value="Update">Submit</button>
        </div>
    </div>
    </div>
</form>

我想包括一个选项，让用户选择他/她想要选择的变量数量。与电子商务网站或相册类似，它们通常为您提供一次“显示 25”的选项，并为您提供将其更改为“显示 50”、“显示 100”或“全部显示”的选项为了让用户能够控制他们能够在页面中导航的杂乱程度。我可以找到几个像 datatables.js 这样的例子，但它们只适用于表。我找不到解决办法？

Answer 1

如果您访问 javascript，您可以编写类似这样的逻辑。

let container = document.getElementById('container');



for (let i=0; i<200; i++) {
  let div = document.createElement('div');
  div.className = 'box';
  container.appendChild(div);
}

var items = document.getElementsByClassName('box');


function show(howMany) {
 
  showAll();
  
    let count = parseInt(howMany);
    for(let i = 0; i<items.length;i++){
      if(i<count){
        continue
      } else {
        items[i].style.display = 'none';
      }
    }
}

function showAll() {
  for(let i = 0; i<items.length;i++){
      items[i].style.display = 'inline-block';
    }
}

.box{
  display: inline-block;
  height: 25px;
  width: 25px;
  background: tomato;
  margin-right: 4px;
}

<button onclick="show('50')">show 50</button>
<button onclick="show('100')">show 100</button>
<button onclick="showAll()">show all</button>

<div id="container"></div>