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

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

本文关键字：工作 何工作 Js 中的 data-sort-name Bootstrap      更新时间：2023-09-26

我使用以下库: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>

我想显示total格式化的数据，但我想用Total属性排序这列，因为total格式化不能用于此。在文档中我看到如下内容:

data-sort-name:提供一个可定制的排序名称，而不是默认的标题中的Sort-name，或列的字段名称。例如,列可能显示"html"的fieldName的值，例如"abc"，而是一个要排序的fieldName为"content"，值为"abc"

但是如何数据没有正确排序，有人经历过这个还是我误解了什么?

实际上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/

相关文章：