Bootstrap-table

Question

在我的 I asked how to define initial sorting order, but I noticed that sorting is not correct with data-reactid attributes. I use bootstrap table 中使用 react.js，生成 data-reactid 个属性。

jsfiddle - table 具有 data-reactid 属性，排序不正确

如果您对 "CustomerN" 列进行排序，则行的顺序不正确。

jsfiddle - table 没有 data-reactid 属性，排序正确

html

<table class="table table-striped table-bordered table-hover" cellspacing="0" id="table3" data-show-columns="true" data-show-multi-sort="true">
   <thead>
      <tr>
         <th data-field="CustomerName" data-sortable="true">CustomerN</th>
         <th data-field="ProjectName" data-sortable="true">ProjectN</th>
         <th data-field="ProjectType" data-sortable="true">ProjectT</th>
         <th data-field="ProjectDetails" data-sortable="true">ProjectD</th>
      </tr>
   </thead>
   <tbody>
      <tr>
      <td data-customer-id="49" data-reactid=".0.1.0.1.1.1..1:[=12=]"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">Quiksilver</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Vix eu erant doctus delenit, et copiosae indoctum accommodare eum."
         </td>
      </tr>
      <tr>
         <td data-customer-id="80" data-reactid=".0.1.0.1.1.1..1:[=12=]"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">asdasd</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td> 
            "Ad quodsi luptatum expetenda eum, sed ludus dicam"
         </td>
      </tr>
      <tr>
         <td data-customer-id="40" data-reactid=".0.1.0.1.1.1..1:[=12=]"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">dell</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-customer-id="30" data-reactid=".0.1.0.1.1.1..1:[=12=]"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">dell</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-customer-id="10" data-reactid=".0.1.0.1.1.1..1:[=12=]"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">Rip Curl</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
      <tr>
         <td data-reactid=".0.1.0.1.1.1..1:[=12=]" data-customer-id="2"><a data-reactid=".0.1.0.1.1.1..1:[=12=].0">Java</a></td>
         <td>Services SOW #1</td>
         <td>Project | T&amp;M</td>
         <td>"Inani fabulas nominavi sea no."
         </td>
      </tr>
   </tbody>
</table>

javascript

$(function(){
  $('#table3').bootstrapTable(
  {"sortName": "CustomerName","sortOrder":"asc"});
});

Answer 1

如果您使用开发者工具调试问题代码，您会发现用于排序的值不是实际的客户名称，而是整个<a href=""...>dell</a>。由于您使用的是默认排序器，因此字符串比较会将整个字符串用于比较。 data-reactid 与 boostraptable 库没有冲突，但由于分配给该属性的值，它有副作用。在做比较排序时，由于字符串的开头相似，所以data-reactid的变化决定了元素的位置。

有两种方法可以解决这个问题。

将 data-value 属性附加到超链接，它应该紧跟在 a 标记之后。例如。 <a data-value="dell" data-reactid...></a>
使用 bootstrap table 提供的格式化程序并保持列中显示的数据干净。

Bootstrap-table - data-reactid 属性的排序不正确

Bootstrap-table - sorting isn't correct with data-reactid attributes

javascript

jquery

twitter-bootstrap

columnsorting