Таблица Bootstrap: Исключить столбец идентификатора от сортировки

Question

Можно ли исключить столбцы идентификаторов из сортировки при сортировке других столбцов? (Чтобы избежать идентификаторов перепутались)

здесь jsFiddle

HTML:

<table id="summaryTable"> 
    <thead> 
    <tr> 
     <th data-field="id" data-align="center" data-width="20px" >id</th> 
     <th data-field="name" data-align="center" data-sortable="true">Name</th> 
     <th data-field="type" data-align="center" data-sortable="true">type</th> 
    </tr> 
    </thead> 
</table> 

Answer 1

Простейший способ это иметь нумерацию в столбце «ИД», сформированный на основе индекса строки - вместо того, содержание если отображаемый идентификатор строки не важен. Вы все равно можете иметь фактическую строку содержимого в качестве атрибута данных для первого td, чтобы вы могли изолировать содержимое строки или передавать данные обратно на задний конец - просто, чтобы отображаемый индекс строки был сгенерирован как последовательный список строк, который всегда выглядит правильно пронумерованным - независимо от порядка строк.

Обратите внимание, что у меня есть кнопки, фактически воссоздающие таблицу на их клике - это НЕ, как вы это сделаете, но только для того, чтобы продемонстрировать нумерацию индекса строки, в то время как фактический порядок индекса поддерживается в атрибут данных первого td.

$(document).ready(function(){ 
 
numberRows(); 
 
    
 
    $('#sortButtonUp').click(function(){ 
 
    $('#summaryTable tbody').html('<tr><td class="generatedID" data-actualID = "2"></td><td>Susan</td> <td>Admin</td></tr><tr><td class="generatedID" data-actualID = "1"></td> <td>Bob</td> <td>Customer</td></tr>'); 
 
    numberRows(); 
 
    }) 
 
    
 
     
 
    $('#sortButtonDown').click(function(){ 
 
    $('#summaryTable tbody').html('<tr><td class="generatedID" data-actualID = "1"></td> <td>Bob</td> <td>Customer</td></tr><tr><td class="generatedID" data-actualID = "2"></td><td>Susan</td> <td>Admin</td></tr>'); 
 
    numberRows(); 
 
    }) 
 
    }) 
 

 
    function numberRows(){ 
 
    $('.generatedID').each(function(index){ 
 
    $(this).text(index +1); 
 
    }) 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="summaryTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>Name</th> 
 
     <th>type</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="generatedID" data-actualID = "1"></td> 
 
     <td>Bob</td> 
 
     <td>Customer</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="generatedID" data-actualID = "2"></td> 
 
     <td>Susan</td> 
 
     <td>Admin</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<hr/> 
 
<button type = "button" id = "sortButtonUp" >Sort Name up</button> 
 
<button type = "button" id = "sortButtonDown" >Sort Name Down</button>

Answer 2

Моя идея поддерживать фиксированный столбец во время table column sort process основана на:

• глобальную переменную для сохранения данных таблицы перед началом сортировки (то есть: onSort события), чтобы иметь неупорядоченные данные для задействованного столбца
• использовать предыдущие данные по визуализации таблицы (то есть: событие onPreBody), чтобы сбросить порядок на col итп вашего интереса

Мой сниппета:

$(document).ready(function() { 
 
    var t = [ 
 
    {"id": "1", "name": "john", "type": "car"}, 
 
    {"id": "2", "name": "ted0", "type": "house"}, 
 
    {"id": "3", "name": "ted1", "type": "bike"}, 
 
    {"id": "4", "name": "ted2", "type": "bike"}, 
 
    {"id": "5", "name": "ted3", "type": "bike"}, 
 
    {"id": "6", "name": "ted4", "type": "bike"}, 
 
    {"id": "7", "name": "ted5", "type": "bike"}, 
 
    {"id": "8", "name": "ted6", "type": "bike"}, 
 
    {"id": "9", "name": "ted7", "type": "bike"}, 
 
    {"id": "10", "name": "ted8", "type": "bike"}, 
 
    {"id": "11", "name": "ted9", "type": "bike"}, 
 
    {"id": "12", "name": "ted10", "type": "bike"}, 
 
    {"id": "13", "name": "ted11", "type": "bike"}, 
 
    {"id": "14", "name": "ted12", "type": "bike"}, 
 
    {"id": "15", "name": "ted13", "type": "bike"}, 
 
    {"id": "16", "name": "ted14", "type": "bike"}, 
 
    {"id": "17", "name": "ted15", "type": "bike"}, 
 
    {"id": "18", "name": "ted16", "type": "bike"}, 
 
    {"id": "19", "name": "ted17", "type": "bike"}, 
 
    {"id": "20", "name": "ted18", "type": "bike"}, 
 
    ]; 
 

 

 
    //TABLE 1 
 
    var savedData = null; 
 
    $('#summaryTable').bootstrapTable({ 
 
     data: t, 
 
     onSort: function(name, order) { 
 
     savedData = $('#summaryTable').bootstrapTable('getData').map(function(element, index) { 
 
      return element.id; 
 
     }); 
 
     }, 
 
     onPreBody: function (args) { 
 
     if (savedData != null) { 
 
      args.forEach(function(element, index) { 
 
      element.id = savedData[index]; 
 
      }); 
 
      savedData = null; 
 
     } 
 
     } 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script> 
 

 
<div class="container"> 
 
    <p>TABLE 1</p> 
 
    <table id="summaryTable" data-pagination="true"> 
 
     <thead> 
 
     <tr> 
 
      <th data-field="id" data-align="center" data-width="20px" data-sortable="false">id</th> 
 
      <th data-field="name" data-align="center" data-sortable="true">Name</th> 
 
      <th data-field="type" data-align="center" data-sortable="true">type</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    <br> 
 
</div>

Answer 3

Я нашел лучший ответ, который работает, как мне нужно было в моем случае, чтобы использовать data-formater. Работает с разбиением на страницы, с фильтром и сортировкой столбцов.

Все here.

Это просто добавить функцию:

function runningFormatter(value, row, index) { 
    return index; 
}