bootstrap表J中的data-sort-name如何工作？

Question

我正在使用下面的库:http://bootstrap-table.wenzhixin.net.cn/documentation/

我将json对象加载到这个表中工作正常,但现在出现了问题.我希望能够对列进行排序.

我的Json布局如下:

[{"Total": 12345.56, "Name": "Monkey1", "TotalFormatted": "$ 12.345,56"},{"Total": 13345.56, "Name": "Monkey3", "TotalFormatted": "$ 13.345,56"},{"Total": 11345.56, "Name": "Monkey2", "TotalFormatted": "$ 11.345,56"}]

  <table id="test" data-page-size="10" data-pagination="true" data-unique-id="true" data-show-footer="false">
                <thead>
                    <tr>
                        <th data-field="Name">Name</th>
                        <th data-field="TotalFormatted" data-sort-name="Total" data-sortable="true" data-align="right">TotalFormatted</th>
                    </tr>
                </thead>
            </table>

我想显示TotalFormatted数据,但我想用Total属性对此列进行排序,因为TotalFormatted不能用于此.在文档中,我看到以下内容:

data-sort-name:提供可自定义的排序名称,而不是标题中的默认排序名称或列的字段名称.例如,列可能会显示"html"的fieldName值,例如" abc ",但要排序的fieldName是"content",其值为"abc".

但是,如果数据没有正确排序,是否有人对此进行过表达或者我误解了某些内容？

Answer 1

实际上data-sort-name并不是这样的.data-sort-name选项的主要用途是控制表数据的默认排序.

对于data-sort-name使用默认排序的选项,它需要指向data-field表中列的一个属性.

注意:简而言之data-field就像是添加到每列的id,该data-sort-name选项指的是在加载时对表进行排序.

为了更好地理解这一点,以下是Bootstrap站点代码的示例

• 尝试更改data-sort-name其中一个列data-field值并执行代码,您将了解我刚才解释的内容.

HTML代码:

<table data-toggle="table"
   data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
   data-sort-name="stargazers_count"
   data-sort-order="desc">
<thead>
<tr>
    <th data-field="name" 
        data-sortable="true">
            Name
    </th>
    <th data-field="stargazers_count" 
        data-sortable="true">
            Stars
    </th>
    <th data-field="forks_count" 
        data-sortable="true">
            Forks
    </th>
    <th data-field="description" 
        data-sortable="true">
            Description
    </th>
</tr>
</thead>

现场演示@ JSFIDDLE:http://jsfiddle.net/dreamweiver/ptxj8Lao/