Question

190

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

rated 0 times [ 197] [ 7] / answers: 1 / hits: 23940 / 9 Years ago, mon, july 20, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cruzjenseny

Add To Favorites

Follow

Total Points: 409

Total Questions: 93

Total Answers: 106

Location: Lithuania

Member since Fri, Sep 4, 2020

4 Years ago

answered 9 Years ago kaceyr · Accepted Answer

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/