引導表：排除標識列的排序

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