How do I set a fixed number of rows for a HTML table?

Question

I would like my HTML table to display blank rows to make the total number of rows be the same every time, so that the table can fill the screen at all times. I am working with a list of objects, and I'd like to iterate through each one displaying it on a row, then iterate through a few more times until a fixed number of iterations.

I currently have a razor foreach loop that loops through each object and displays them as rows. An idea I had was to do it with a for loop like

for (int i=0; i<10; i++)
  { row for object }

how could I access each object to display it inside of this for loop?

Edit: here's more code

@foreach (var exampleObject in Model)
{
    if (exampleObject.Position == "examplePosition")
    {
        <tr>
            <td>@exampleObject.Name<span class="rotate">
                <text class="button">@Html.ActionLink(HttpUtility.HtmlDecode("&#9998;"), "Edit", new { id = exampleObject.ID }, new { style = "color:Black" })</text></span>
            </td>
            <td>@exampleObject.Rooms</td>
            <td>@exampleObject.Phone</td>
            <td><text class="button" style="float:right">@Html.ActionLink(HttpUtility.HtmlDecode("&#9746;"), "Delete", new { id = exampleObject.ID }, new { style = "color:Black" })</text>@exampleObject.Location</td>
        </tr>
    }
}

Final Edit: I found a way to do it that is a bit sloppy, but it is simple and the only way I've found. After the above code, I did this:

@for (var i = 0; i < 1; i++)
    {
        var s = 0;
        foreach (var exampleObject in Model)
        {
            if (exampleObject.Position == "examplePosition")
            {
                s++;
            }
        }
        for (i = s; i < 12; i++)
        {
            <tr>
                <td colspan="4">
                    &nbsp;
                </td>
            </tr>
        }
    }

I basically made a for loop that iterates once so that I could have some nested razor to work with inside of the table (bad practice, I know). I then counted how many I had displaying on this specific position's table with a foreach loop, setting the amount as a local variable declared in the sloppy for loop. I then did another for loop, this time setting i as the amount of rows I already had, and set it to iterate and display an empty row as long as the row count was lower than my preferred number. Its a sloppy way to do it but hey, it works.

FINAL FINAL edit:

I cleaned it up a bit and this seems to work much better.

@{
            var counter = 0;

            foreach (var exampleObject in Model)
            {
                if (exampleObject.Position == "examplePosition" && counter < 13)
                {
                    <tr>
                        <td>@exampleObject.Name</td>
                        <td>@exampleObject.Rooms</td>
                        <td>@exampleObject.Phone</td>
                        <td>@exampleObject.Location</td>
                    </tr>
                    counter++;
                }
            }

            for (int i=counter; i<13; i++)
            {
                <tr><td colspan="4">&nbsp;</td></tr>
            }
        }

Answer 1

You can implement pagination. Here is a simple method for retrieving pages of data for a request.

 var requests = { 'vehicles' : [ { "id": 1, "name": "John", "age": 24, "make": "Chevorlet", "model": "Silverado", "year": 2016 }, { "id": 2, "name": "Jack", "age": 36, "make": "Toyota", "model": "Corolla", "year": 2018 }, { "id": 3, "name": "Jill", "age": 29, "make": "Ford", "model": "Escape", "year": 2015 } ] }; console.log(requestPage('vehicles', 1, 2)); // Request page #1 of 2 console.log(requestPage('vehicles', 2, 2)); // Request page #2 of 2 function requestPage(request, page, limit) { if (requests == null || requests[request] == null) throw Error('Data does not exist for ' + request) let data = requests[request], records = []; for (let offset = 0; offset < limit; offset++) { let index = ((page - 1) * limit) + offset; if (index < data.length) records.push(requests[request][index]); } return { metadata : { page : page, pages : Math.ceil(data.length / limit), limit : limit, count : records.length, total : data.length }, payload : records }; } 

 .as-console-wrapper { top: 0; max-height: 100% !important; } 

jQuery Table generation with pagination

$.renderRows = function(fields, data, page, limit) {
  let $tbody = $('<tbody>');
  for (let index = ((page - 1) * limit); index < limit; index++) {
    let $row = $('<tr>');
    if (index < data.length) {
      $row.append(fields.map((field, col) => $('<td>').text(data[index][field])));
    } else {
      $row.append(fields.map((field, col) => $('<td>').html('&#32;')));
    }
    $tbody.append($row);
  }
  return $tbody;
};

Example

 (function($) { $.fn.renderTable = function(data, page, limit) { let fields = Object.keys(data[0]); return this.renderHeaders(fields) .renderRows(fields, data, page, limit) .renderFooter(page, limit, Math.ceil(data.length / limit), data.length, fields.length); }; $.fn.renderHeaders = function(fields) { return this.append($.renderHeaders(fields)); } $.fn.renderRows = function(fields, data, page, limit) { return this.append($.renderRows(fields, data, page, limit)); }; $.fn.renderFooter = function(page, limit, pages, total, colspan) { return this.append($.renderFooter(page, limit, pages, total, colspan)); }; $.tableFromJson = function(data, page, limit) { return $('<table>').renderTable(data, page, limit); }; $.renderHeaders = function(fields) { return $('<thead>').append($('<tr>').append(fields .map(field => $('<th>').text(field)))); }; $.renderRows = function(fields, data, page, limit) { let $tbody = $('<tbody>'); for (let offset = 0; offset < limit; offset++) { let index = ((page - 1) * limit) + offset, $row = $('<tr>'); if (index < data.length) { $row.append(fields.map((field, col) => $('<td>').text(data[index][field]))); } else { $row.append(fields.map((field, col) => $('<td>').html('&#32;'))); } $tbody.append($row); } return $tbody; }; $.renderFooter = function(page, limit, pages, total, colspan) { return $('<tfoot>') .append($('<tr>') .append($('<td>') .attr('colspan', colspan) .text([ 'Total: ' + total, 'Page: ' + page + '/' + pages, 'Limit: ' + limit ].join(', ')))); }; })(jQuery); var jsonData = [ { "id": 1, "name": "John", "age": 24, "make": "Chevorlet", "model": "Silverado", "year": 2016 }, { "id": 2, "name": "Jack", "age": 36, "make": "Toyota", "model": "Corolla", "year": 2018 }, { "id": 3, "name": "Jill", "age": 29, "make": "Ford", "model": "Escape", "year": 2015 } ]; // Page 1 with a limit of 10 entries $.tableFromJson(jsonData, 1, 10).addClass('stylized').appendTo('body'); 

 table.stylized { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; text-align: left; border-collapse: collapse; margin: 4px; width: 600px; } table.stylized thead th { text-transform: capitalize; font-size: 13px; color: #039; background: #b9c9fe; padding: 6px; cursor: pointer; } table.stylized tbody tr:nth-child(odd) { background: #f2f5ff; } table.stylized tbody tr:nth-child(even) { background: #e8edff; } table.stylized tbody td { border-top: 1px solid #fff; color: #669; padding: 6px; height: 1.5em; /* Min row height */ } table.stylized tbody tr:hover td { background: #d0dafd; } table.stylized tfoot tr { color: #039; background: #b9c9fe; text-align: right; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 2

Here is an example

var tableRowCount = 100;

@for(var i = 0; i < tableRowCount; i++)
{
    if (i < Model.Count )
    {
            <tr>
                <td>@exampleObject.Name<span class="rotate"><text class="button">@Html.ActionLink(HttpUtility.HtmlDecode("&#9998;"), "Edit", new { id = exampleObject.ID }, new { style = "color:Black" })</text></span></td>
                    <td>@exampleObject.Rooms</td>
                    <td>@exampleObject.Phone</td>
                    <td><text class="button" style="float:right">@Html.ActionLink(HttpUtility.HtmlDecode("&#9746;"), "Delete", new { id = exampleObject.ID }, new { style = "color:Black" })</text>@exampleObject.Location</td>
            </tr>
        }
    else
    {
        <tr>
            <td colspan="3" >&nbsp;</td>
        </tr>
    }
    }