Javascript 引导表-排序是'；无法使用数据ID属性更正

在我的示例中，我询问如何定义初始排序顺序，但我注意到使用

datareactid

属性进行排序是不正确的。我与react.js一起使用，它生成

数据reactid

属性

-具有

数据ID

属性的表，排序不正确

如果您订购“CustomerN”列，则行的顺序不正确

-表没有

数据ID

属性，排序正确

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.$51.1:$0"><a data-reactid=".0.1.0.1.1.1.$51.1:$0.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.$71.1:$0"><a data-reactid=".0.1.0.1.1.1.$71.1:$0.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.$66.1:$0"><a data-reactid=".0.1.0.1.1.1.$66.1:$0.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.1:$0"><a data-reactid=".0.1.0.1.1.1.$1.1:$0.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.$54.1:$0"><a data-reactid=".0.1.0.1.1.1.$54.1:$0.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.$2.1:$0" data-customer-id="2"><a data-reactid=".0.1.0.1.1.1.$2.1:$0.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>

---

如果使用开发人员工具调试问题代码，您将认识到用于排序的值不是实际的客户名称，而是整个

。因为您使用的是默认的分类器，所以字符串比较会考虑将整个字符串用于比较。data reactid与BoosTaptable库没有冲突，但由于分配给此属性的值，它具有副作用。在进行排序比较时，由于字符串的开头相似，因此数据reactid中的更改决定了元素的位置

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

将数据值属性附加到超链接，它应该立即出现在

a

标记之后。例如，

使用引导表提供的格式化程序，保持列中显示的数据干净

---

如果使用开发人员工具调试问题代码，您将认识到用于排序的值不是实际的客户名称，而是整个

。因为您使用的是默认的分类器，所以字符串比较会考虑将整个字符串用于比较。data reactid与BoosTaptable库没有冲突，但由于分配给此属性的值，它具有副作用。在进行排序比较时，由于字符串的开头相似，因此数据reactid中的更改决定了元素的位置

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

将数据值属性附加到超链接，它应该立即出现在

a

标记之后。例如，

使用引导表提供的格式化程序，保持列中显示的数据干净

---

您不应该同时使用React和jQuery。React的整个想法是避免手动操作DOM。看看我知道的，但是我会花很长时间开发一些已经在jQuery中开发的组件，React引导表不适合我的需要，我在bootstrap-table中使用了很多插件。那么你可能不应该使用

React

，除非你想经历代码进出的痛苦

React

我的应用程序已经开发成功了，这是我的表组件中唯一一个不起作用的东西。你不应该像那样同时使用React和jQuery。React的整个想法是避免手动操作DOM。看看我知道的，但是我会花很长时间开发一些已经在jQuery中开发的组件，React引导表不适合我的需要，我在bootstrap-table中使用了很多插件。那么你可能不应该使用

React

，除非你想经历代码进出的痛苦

React

我的应用程序已经开发出来了，没有任何痛苦，这是我的table组件中唯一不起作用的东西。

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