I'm adding Boostrap DataTable to my project, which has some minimun requirements to work: http://legacy.datatables.net/usage/
This works fine with the following code:
<table id="management" class="table table-bordered table-hover" >
<thead>
<tr>
<th class="col-md-3">Serial</th>
<th class="col-md-2">Tienda</th>
<th class="col-md-1">Precio</th>
<th class="col-md-2">Estado</th>
<th class="col-md-1">Update</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-3">
<div>Column1</div>
</td>
<td class="col-md-2">
<div>Column2</div>
</td>
<td class="col-md-1">
<div>Column3</div>
</td>
<td class="col-md-2">
<div>Column4</div>
</td>
<td class="col-md-1">
<div>Column5</div>
</td>
</tr>
@foreach (var item in Model)
{
<tr>
<td hidden >
<form id="@(String.Format("{0}{1}","form",item.Id))" asp-action="Management" asp-route-id="@item.Id" method="post">
</form>
</td>
<td class="col-md-3">
<input form="@(String.Format("{0}{1}","form",item.Id))" type="hidden" asp-for="@item.Id" />
<div class="form-group" form="@(String.Format("{0}{1}","form",item.Id))">
<div>
<input form="@(String.Format("{0}{1}","form",item.Id))" asp-for="@item.MchName" name="MchName" readonly class="form-control" />
<span asp-validation-for="@item.MchName" class="text-danger"></span>
</div>
</div>
</td>
<td class="col-md-2">
<div class="form-group" form="@(String.Format("{0}{1}","form",item.Id))">
<div>
<select asp-for="@item.StoreID" name="StoreID" class="form-control" asp-items="ViewBag.StoreID" form="@(String.Format("{0}{1}","form",item.Id))"></select>
<span asp-validation-for="@item.StoreID" class="text-danger"></span>
</div>
</div>
</td>
<td class="col-md-1">
<div class="form-group" form="@(String.Format("{0}{1}","form",item.Id))">
<div>
<input type="number" max="10" min="0" step=".5" asp-for="@item.PUnit" name="PUnit" class="form-control" form="@(String.Format("{0}{1}","form",item.Id))" />
<span asp-validation-for="@item.PUnit" class="text-danger"></span>
</div>
</div>
</td>
<td class="col-md-2">
<div class="form-group" form="@(String.Format("{0}{1}","form",item.Id))">
<div>
<select name="Status" asp-for="@item.MachineStatus" class="form-control" form="@(String.Format("{0}{1}","form",item.Id))">
<option value="0">Operativo</option>
<option value="1">Nuevo Item</option>
<option value="2">Reparación</option>
</select>
<span asp-validation-for="@item.MachineStatus" class="text-danger"></span>
</div>
</div>
</td>
<td class="col-md-1">
<input form="@(String.Format("{0}{1}","form",item.Id))" id="submit-data" type="submit" value="Update" class="btn btn-default" />
</td>
</tr>}
</tbody>
</table>
The reason why it's working is because I manually added a row on the <tbody>
and with this, the table comply with the requirements, but of course, it can't be leaved like that.
When I remove that row and let the table be constructed with the iterator:
@foreach (var item in Model)
I get the following errors:
Question: Is it possible to use Bootstrap Datatable like I intend to? The errors appear because it does not take into account the rows that are being constructed with the iterator.
Maybe it's not supported.
Solved.
The number of rows of the header and the body should match.
In the iterator of the body there is a hidden extra column that is being made, given a total of 6 vs the 5 of the header.
Matching these numbers made it possible to work.
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I need to merger three queries ans show in one table structure
I'd like to make some cells of html table editable, simply double click a cell, input some text and the changes can be sent to serverI don't want to use some toolkits like dojo data grid
Oracle's database link allows user to query on multiple physical databases
SELECTing rows with LIMIT condition delivers unexpected number of rows: