引导表：从排序中排除 ID 列

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

我找到了适合我的情况的最佳答案，即使用data-formater。适用于分页、过滤器输入和列排序。

一切都是here。

就是简单的添加一个函数：

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

Answer 2

最简单的方法是根据行索引生成“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 3

我在table column sort process 期间保持固定列的想法基于：

• 一个全局变量，用于在排序开始之前保存表数据（即：onSort 事件），以使相关列的数据无序
• 使用之前的表格渲染数据（即：onPreBody 事件）来重置您感兴趣的列的排序

我的sn-p：

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