Как сделать автоматическую генерацию серийного номера стабильной и фиксированной, если сортировка выполняется в порядке возрастания в каком-либо другом столбце в виде сетки

Question

У меня есть представление списка на моей странице. У меня есть три столбца, такие как серийный номер, имя строки, код строки. Я выполнил сортировку (в порядке возрастания), используя jquery для имени строки. Если такая сортировка означает мой серийный номертакже меняется, да это, очевидно, изменится, и мне нужно исправить число стабильных и по умолчанию 1,2,3 в моем списке, если я сортирую также. Помогите мне!Пожалуйста, помогите мне исправить исправленный серийный номер, он должен продолжаться 1,2,3..так, если я сортирую тоже. Я пробовал некоторые jquery, но это не сработало. Как использовать функцию jquery для решения этой проблемы?

My view :
@model List<BusinessEntities.RoleChangeReasonModel>
    <table class="table table-striped">
        <thead>
            <tr class="table-primary">
                <th></th>
                <th class="w-1">No.</th>
                <th>row name</th>
                <th class="pointer">row code<i class="fa fa-fw fa-sort-up"></i></th>
                <th></th>
                <th>Action</th>

            </tr>
        </thead>
        <tbody>
           @{ int i=1; }
            @foreach (var item in Model)
            {
                     <tr>
                    <td><input type="checkbox" class="Id editable" value="@Html.DisplayFor(modelItem => item.Id)" class="checkBoxRow" name="chkRow" /></td>
                  //serial number autogeneration  <td class="sno">@Html.Raw(i++)</td>
                    <td><input class="Id editable" type="hidden" readonly="readonly" value="@Html.DisplayFor(modelItem => item.Id)" /></td>
                    <td><input class="Reason editable" readonly="readonly" value="@Html.DisplayFor(modelItem => item.rowname)" /></td>
<td><input class="Reason editable" readonly="readonly" value="@Html.DisplayFor(modelItem => item.rowcode)" /></td>
                 </tr>
            }
        </tbody>
    </table>

Answer 1

.w=1 {

  counter-reset: counter1;
}

tbody::before {

  counter-increment: counter1;
  content: "Section " counter(counter1) ". ";
} 

View:
 <td><input type="checkbox" id="w-1" class="Id editable" value="@Html.DisplayFor(modelItem => item.Id)" class="checkBoxRow" name="chkRow" /></td>