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

Question

I am using folowing library : http://bootstrap-table.wenzhixin.net.cn/documentation/

I load json objects into this table which works fine, but now here comes the problem. I want to be able to sort columns.

My Json layout as folows :

[{"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>

I want to show TotalFormatted data, but i want to sort this column with Total property, since TotalFormatted cant be used for that. In the documentation i saw the following :

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".

but how ever data is not sorted correctly, has anyone exprienced this or have i misunderstood something?

Answer 1

Actually data-sort-name doesn't work that way. the main intention of data-sort-name option is to control the default sorting of the table data.

for the data-sort-name option to work with default sorting it needs to point to one of the data-field attribute of the column in the table.

note : In short data-field is like a an id added to each column, which the data-sort-name option refers to sort the table on load.

To understand this better, here is an example with code from Bootstrap site

• try changing the data-sort-name to one of the columns data-field value and execute the code, you will understand what I just explained above.

HTML Code:

<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>

Live demo @ JSFIDDLE: http://jsfiddle.net/dreamweiver/ptxj8Lao/