Bootstrap-таблица - сортировка некорректна с атрибутами data-реагирует

Question

В моем предыдущем вопросе я спросил, как определить начальный порядок сортировки, но заметил, что сортировка не data-reactid атрибутов. Я использую таблицу начальной загрузки с response.js, который генерирует data-reactid атрибутов.

jsfiddle - таблица с data-reactid атрибуты, сортировка не правильная

Если вы заказываете столбец "CustomerN", последовательность строк не является правильной.

jsfiddle - таблица без 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.$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>

Javascript

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

Answer 1

Если вы отладите код проблемы с помощью инструментов разработчика, вы поймете, что значения, используемые для сортировки, являются не фактическими именами клиентов, а целыми <a href=""...>dell</a>, Поскольку вы используете сортировщик по умолчанию, при сравнении строк вся строка будет использоваться для сравнения. Данные-реакции не конфликтуют с библиотекой Boostraptable, но имеют побочные эффекты из-за значения, назначенного этому атрибуту. При выполнении сравнения для сортировки, так как начало строки аналогично, изменение в data-реакции tid определяет положение элемента.

Есть два подхода к решению этой проблемы.

1. Добавьте атрибут data-value к гиперссылке, и он должен появиться сразу после a тег. Например <a data-value="dell" data-reactid...></a>
2. Используйте средство форматирования, предоставляемое таблицей начальной загрузки, и храните данные, отображаемые в столбцах, в чистоте.