javascript - 对表格进行排序但使一列不移动

Question

我想对下表进行排序，但同时我不希望编号列移动，而是在其他列移动时它应该保持固定。关于我应该如何做的任何想法

$(document).ready(function() { 
    $("#myTable").tablesorter({ 
        // pass the headers argument and assing a object 
        headers: { 
            // assign the first column not to sort
          
           0: { 
                // disable it by setting the property sorter to false 
                sorter: false 
            }, 
        } 
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">             
    <thead>
        <tr> 
            <th>#</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>date</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>1</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>$9.99</td> 
            <td>20%</td> 
            <td>jul 6, 2006 8:14 am</td> 
        </tr> 
        <tr> 
            <td>2</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>$19.99</td> 
            <td>25%</td> 
            <td>dec 10, 2002 5:14 am</td> 
        </tr> 
        <tr> 
            <td>3</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>$15.89</td> 
            <td>44%</td> 
            <td>jan 12, 2003 11:14 am</td> 
        </tr> 
        <tr> 
            <td>4</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>$153.19</td> 
            <td>44%</td> 
            <td>jan 18, 2001 9:12 am</td> 
        </tr> 
        <tr> 
            <td>5</td> 
            <td>evans</td> 
            <td>22</td> 
            <td>$13.19</td> 
            <td>11%</td> 
            <td>jan 18, 2007 9:12 am</td> 
        </tr> 
    </tbody> 
</table>

Answer 1

您可以绑定(bind)到 sortEnd 事件，然后只需将新文本写入第一列即可。

以下代码利用了以下事实

• jQuery 的 .text() 接受回调函数来计算并返回每个匹配元素的新文本​​ ( http://api.jquery.com/text/ )
• 此回调函数接收(从零开始的)元素索引作为第一个参数，因此您不需要保留单独的计数器变量

$(function() { 
    $("#myTable").tablesorter({ 
        headers: { 
            0: { 
                sorter: false 
            }, 
        } 
    }).on("sortEnd", function () {
        $(this).find('tbody td:first-child').text(function (i) {
            return i + 1;
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/js/jquery.tablesorter.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.2/css/theme.blue.min.css' type='text/css' />
<table id='myTable' cellspacing="1" class="tablesorter-blue">             
    <thead>
        <tr> 
            <th>#</th> 
            <th>last name</th> 
            <th>age</th> 
            <th>total</th> 
            <th>discount</th> 
            <th>date</th> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td>1</td> 
            <td>parker</td> 
            <td>28</td> 
            <td>$9.99</td> 
            <td>20%</td> 
            <td>jul 6, 2006 8:14 am</td> 
        </tr> 
        <tr> 
            <td>2</td> 
            <td>hood</td> 
            <td>33</td> 
            <td>$19.99</td> 
            <td>25%</td> 
            <td>dec 10, 2002 5:14 am</td> 
        </tr> 
        <tr> 
            <td>3</td> 
            <td>kent</td> 
            <td>18</td> 
            <td>$15.89</td> 
            <td>44%</td> 
            <td>jan 12, 2003 11:14 am</td> 
        </tr> 
        <tr> 
            <td>4</td> 
            <td>almighty</td> 
            <td>45</td> 
            <td>$153.19</td> 
            <td>44%</td> 
            <td>jan 18, 2001 9:12 am</td> 
        </tr> 
        <tr> 
            <td>5</td> 
            <td>evans</td> 
            <td>22</td> 
            <td>$13.19</td> 
            <td>11%</td> 
            <td>jan 18, 2007 9:12 am</td> 
        </tr> 
    </tbody> 
</table>