How does name-sorting of data work in Jst Bootstrap table?
I am using the following library: http://bootstrap-table.wenzhixin.net.cn/documentation/
I am loading json objects into this table, which works great, but now there is a problem. I want to be able to sort the 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 the TotalFormatted data, but I want to sort this column using the Total property as it uses the TotalFormatted method. I saw the following in the documentation:
data-sort-name: Specify a custom sort name, not the default sort-name in the header or column field name. For example, a column might display the fieldName value "html", such as " abc ", but the fieldName to sort "content" with the value "abc".
but more than ever the data is incorrectly sorted, did anyone rule it out, or did I not understand something?
source to share
data-sort-name
Doesn't really work. the main purpose of this option data-sort-name
is to control the default sorting of table data.
for the parameter data-sort-name
for working with the default sort, you must specify one of the attributes of the data-field
column in the table.
Note. In short, data-field
it's like an identifier added to each column that the parameter data-sort-name
refers to to sort the table on load.
To understand it better, this is a simple code from the Bootstrap site
- try to change the value
data-sort-name
to one of the column valuesdata-field
and run 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/
source to share