Как отобразить определенное пользователем количество полей формы?

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>

Iхотел бы включить опцию пользователя, чтобы выбрать количество переменных, которые он / она хочет выбрать.Подобно сайтам электронной коммерции или фотоальбомам, они обычно дают вам возможность «показывать 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>