Как сохранить серийный номер без изменений в сортировке таблиц HTML

Question

Мой стол

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>name 1</td>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name 2</td>
            <td>data 2</td>
            <td>data 23</td>
        </tr>
    </tbody>
</table>

После сортировки отображается как:

S.No. Name     col 3    col4
2     name 2   data 2   data 23
1     name 1   data 1   data 2

Я хочу это:

S.No. Name     col 3    col4
1     name 2   data 2   data 23
2     name 1   data 1   data 2

S.NoСтолбец всегда должен начинаться с 1, но моя проблема в том, что он сортирует s.no.колонка тоже хочу, чтобы без изменений даже после сортировки.Любая помощь будет оценена.Спасибо за помощь.

Answer 1

Добавьте эту строку кода $(rows[i]).find('td:first').text(i + 1); в цикл for перед table.append(rows[i]);

Также вы можете отключить сортировку по столбцу S.No, если это необходимо оставить без изменений.Примените слушателя щелчка как not(:first-child)

$('th:not(:first-child)').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){
        $(rows[i]).find('td:first').text(i + 1); //update the s.no td in each sorted row
        table.append(rows[i]);
    }
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>S.No.</th>
            <th>Name</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>name 1</td>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>name 2</td>
            <td>data 2</td>
            <td>data 23</td>
        </tr>
    </tbody>
</table>