web-dev-qa-db-ja.com

Bootstrap table Jsのdata-sort-nameはどのように機能しますか？

私は次のライブラリを使用しています： 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>

TotalFormattedデータを表示したいのですが、TotalFormattedを使用できないため、この列をTotalプロパティで並べ替えたいと思います。ドキュメントで私は次のことを見ました：

data-sort-name：ヘッダーのデフォルトのソート名や列のフィールド名ではなく、カスタマイズ可能なソート名を指定します。たとえば、列に「html」のfieldNameの値が表示される場合があります。abc"ですが、ソートするfieldNameは" abc "の値を持つ" content "です。

しかし、データが正しくソートされていない場合、誰かがこれを経験したり、何かを誤解したりしたことがありますか？

javascriptjquerytwitter-bootstrapbootstrap-table
6
Timsen

実際、data-sort-nameはそのようには機能しません。 data-sort-nameオプションの主な目的は、テーブルデータのデフォルトの並べ替えを制御することです。

data-sort-nameオプションをデフォルトの並べ替えで機能させるには、テーブルの列のdata-field属性の1つを指す必要があります。

注：要するに、data-fieldは、各列に追加されるIDのようなものであり、data-sort-nameオプションは、ロード時にテーブルを並べ替えることを示します。

これをよりよく理解するために、これは 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/

11
dreamweiver