How to NOT duplicate select in HTML a million times?

S

shmostertoster2017-01-06 17:20:48

HTML

shmostertoster, 2017-01-06 17:20:48

Hello!
Tell me how not to duplicate select in HTML a million times?
I am making a timesheet application.
The HTML file per worker is 400 lines long (by repeating the select for each day).
For a unit of 400 people - this will never load. )))
31 columns for dates + 4 lines (from the list) per employee (full name + work schedule + time sheet + selects (dict) for each date with a no-show type)
How can I solve the issue with selects so as not to duplicate them in the HTML code?
Taking into account the fact that the changed values in the select need to be written to the database.
Now select looks like this.

<td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD01" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>

Point in the right direction.
Thank you!
UPD!:
HTML looks something like this (reduced to 5 cells in the table. there are 31 in total)
Types of no-shows in the dictionary - there are 41 types of no-shows:

<html>
<head>
<title>Месяц</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

<table width="100%" border="1" cellspacing="0">
  <tr>
    <td bordercolor="1"></td>
  </tr>
  <tr>
    <td bordercolor="1"><table width="100%" border="1" cellspacing="0">
      <tr bgcolor="#D1D5C1">
        <td><div align="center"><span>1</span></div></td>
        <td><div align="center"><span>2</span></div></td>
        <td><div align="center"><span>3</span></div></td>
        <td><div align="center"><span>4</span></div></td>
        <td><div align="center"><span>5</span></div></td>
      </tr>
    <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD01" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD02" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD03" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD04" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>
        <td bgcolor="#F1F2EC">
<strong>
<div class="input-group">
<span class="style4">
<select name="comp_select.VD05" class="selectpicker form-control">
                  {% for i in waka %}
                  <option value="{{ i.letter }}">{{ i.letter }}</option>
                  {% endfor %}
</select>
</div></strong></td>
      </tr>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

P

Pretor DH, 2017-01-06
@PretorDH

Can be done in a new way HTML5 datalist

<input list="workers" name="worker[234]">
<input list="workers" name="worker[456]">
<input list="workers" name="worker[333]">
<input list="workers" name="worker[667]">
<datalist id="workers">
 <option value="Текст1">
 <option value="Текст2">
</datalist>

Here is the datalist-polyfill or polyfills/datalist polyfill for it

M

M-ka, 2017-01-06
@M-ka

There is no point in doing selects for days and duplicating 100500 times.
Make some kind of pop-up / popover (etc.) with a calendar (purely days, perhaps with some kind of editing of the quantity to take into account the month for which the change)
Arrange the entire grid with days beautifully ... perhaps through some kind of class. On the same class, on click, put a call to f-and to run in the place of the click. Passing the place of the call to the script from the popup, as a result, insert and display from the place of the click or calculate the position for positioning, at the choice of the day, make a change to the cell (I'm not talking specifically about td, but about what it acts as such).
In extreme cases, if it is problematic to collect values that are text, then for a simpler assembly, you can stick it into inputs with the text type and arrange it beautifully ...

P

Pavel Belyaev, 2017-01-06
@PavelBelyaev

I did this, first we make selects with only one value (which is set) and a hidden select, when clicking on any option select, we copy it to this one, set the selected value and open the select

P

pcdesign, 2017-01-09
@pcdesign

1) Use Wtforms + form inheritance + wtf.quick_form (if it's bootstrap) to get rid of duplicates.
2) To compress html, use https://pypi.python.org/pypi/django-htmlmin
, although it is for Django, it works on the flask.
3) And another radical way, I recently used it.
https://datatables.net
And in terms of speed, it can handle up to 1 million rows. data with very fast operation and sorting.
I loaded data ajax, and shifted all the calculation and rendering to the user's browser.
Everything works instantly.
These are the speed guidelines:

Client-side processing - DOM sourced data: ~5'000 rows.
Client-side processing - Ajax sourced data (ajax): ~50'000 rows.
Server-side processing (serverSide): millions of rows.
https://datatables.net/faqs/#speed
All html and select including is superimposed already during rendering, and the data is returned in its pure form
https://datatables.net/reference/option/columns.render