Bootstrap DataTable: Constructing the table with an iterator

368
September 13, 2017, at 3:27 PM

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.

Answer 1

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.

Rent Charter Buses Company
READ ALSO
I need to merge three where condition in single query

I need to merge three where condition in single query

I need to merger three queries ans show in one table structure

236
How to make HTML table cell editable?

How to make HTML table cell editable?

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

609
Oracle Database Link - MySQL Equivalent?

Oracle Database Link - MySQL Equivalent?

Oracle's database link allows user to query on multiple physical databases

349
LIMIT condition not working as expected

LIMIT condition not working as expected

SELECTing rows with LIMIT condition delivers unexpected number of rows:

274