如何在 html Table MVC 中给出序列号？使用 css 或 Jquery答案

【问题标题】：How to Give Serial No In html Table MVC? use css or Jquery如何在 html Table MVC 中给出序列号？使用 css 或 Jquery
【发布时间】：2016-04-24 03:36:35
【问题描述】：

我有一个 Mvc 表，它看起来像这样：

<table id="example" class="table table-hover">
    <thead>
        <tr>
            <th>SL NO
            </th>
            <th>Designation Name
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td> 
//Here I want Serial No here [I used Paging] 
                </td>
                <td>

                    @Html.DisplayFor(modelItem => item.desigantionName)
                </td>
                <td>
                    <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Edit", "Edit", new { id = item.desigantionId }) </div>
                    <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Details", "Details", new { id = item.desigantionId }) </div>
                    <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Delete", "Delete", new { id = item.desigantionId })</div>
                </td>
            </tr>
        }
    </tbody>
</table>

上面的代码第一列我想要序列号我使用 sl 不使用 css 但问题是当转到下一页索引 sl 没有重新启动到 1 每个寻呼机我用了 5 行我需要开始第二页索引 sl no up to 6

【问题讨论】：

如何检索模型？获取模型数据时，您必须注意偏移量。您可以在模型中添加一些索引吗？
你的问题几乎没有意义。你怎么可能使用 jQuery 或 CSS 来呈现序列号？除非您的意思是“索引”，或者您只想在每个项目上都有一个序号，例如1,2,3,4,<new page> 5,6,7,8（在这种情况下，正如@derpirscher 所说，您必须知道偏移量）？如果你的意思是序列号，它必须是你正在渲染的项目的一个属性，它必须是唯一的，所以你不能只是在前端凭空生成它，它不会与分页有任何关系。为什么不能只渲染 item.serialNumber 或任何该属性的名称？

标签： c# html css asp.net-mvc

【解决方案1】：

这样做，如果你想打印Model中数据的序列号。pagesize和pageNum应该根据当前页码及其大小设置

             <tbody>

                 @{ int i = 0; }                       
                   @foreach (var item in Model)
                    {
                        <tr>
                            <td> 
                                <label>pageSize * (pageNum - 1) +  @i</label>  //your serial no
                                 @{ i++; }     
                            </td>
                            <td>

                                @Html.DisplayFor(modelItem => item.desigantionName)
                            </td>
                            <td>
                                <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Edit", "Edit", new { id = item.desigantionId }) </div>
                                <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Details", "Details", new { id = item.desigantionId }) </div>
                                <div class="btn btn-default btn-lg disabled p-x-2">@Html.ActionLink("Delete", "Delete", new { id = item.desigantionId })</div>
                            </td>
                        </tr>
                    }
                </tbody

【讨论】：

这仅适用于第一页。操作员明确表示，他使用分页并希望第二页上的索引以例如 5 开头。您的方法将始终打印 0、1、...