引导表：排除标识列的排序

Question

当其他列正在排序时，是否可以排除ID列的排序？ （以避免搞砸的ID）

这里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

简单的办法是必须在“ID列”编号生成基于行索引 - 而不是内容如果显示的行的ID不重要。您仍然可以将实际的内容行作为第一个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上的排序UMN我片断的兴趣

：

$(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; 
}