Bootstrap table Js中的data-sort-name是如何工作的？

Question

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

我将 json 个对象加载到这个 table 中，这工作正常，但现在问题来了。我希望能够对列进行排序。

我的 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 : Provide a customizable sort-name, not the default sort-name in the header, or the field name of the column. For example, a column might display the value of fieldName of "html" such as "abc", but a fieldName to sort is "content" with the value of "abc".

但是数据怎么排序不正确，有没有人经历过这个或者我误解了什么？

Answer 1

实际上data-sort-name不是那样的。 data-sort-name 选项的主要目的是控制 table 数据的默认排序。

对于使用默认排序的 data-sort-name 选项，它需要指向 table.

中列的 data-field 属性之一

注意：简而言之，data-field就像一个id添加到每一列，data-sort-name选项指的是在加载时对table进行排序。

为了更好地理解这一点，这里有一个代码来自 Bootstrap site

的示例

尝试将 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/

Bootstrap table Js中的data-sort-name是如何工作的？

How does data-sort-name in Bootstrap table Js work?

javascript

jquery

twitter-bootstrap

bootstrap-table