显示 bootstrap table 中一行的索引

Question

我希望能够在 bootstrap table 中显示相应行的索引。我的 table 如下所示：

<div class="Explorer" style="display:none">
<table class='table'>
    <thead>
        <tr>
            <th>Rank</th>
            <th>Username</th>
            <th>Points</th>
        </tr>
    </thead>
{% for instance in leaderboardDictionaries %}
    {% for category, userDictionary in instance.items %}
        {% if category == "Explorer" %}
            <tr><td> {{category}} </td></tr>
            {% for name, points in userDictionary.items %}
                <tr>
                    <td data-formatter="runningFormatter" data-field="index">HERE I WANT THE INDEX OF THE ROW?!</td>
                    <td>{{name}}</td>
                    <td>{{points}}</td>
                </tr>
            {% endfor %}
        {% endif %}
    {% endfor %}
{% endfor %}
</table>
</div>

我在网上查了一下，发现了这个，但我无法让它以任何有用的方式工作....所以建议是创建一个外部函数：

<script>
function runningFormatter(value, row, index) {
return index+1;
}
</script>

但是我应该如何使用它呢？该函数已经将行和索引作为参数。我想知道为什么 table 没有 'format-option'，这样我就默认显示行索引 --- 还是有？

Answer 1

您需要将 data- 属性放在 <th> 元素中，而不是 <td> 元素，因为它们是列级属性。

<th data-formatter="runningFormatter">Rank</th>

其次，data-field 用于将来自 javascript 数组或外部源的数据映射到您的列。你不需要那个，因为你在 html.

中写 table

index 将return 行索引基于显示的数据。

显示 bootstrap table 中一行的索引

Showing the index of a row in a bootstrap table

html

bootstrap-table