制表符 - 标题排序

Question

我正在制作许多原始 html table 并使用

将它们转换为制表符

var table = new Tabulator("#main", {
    layout:"fitColumns",
    tooltipsHeader:true,
    pagination:"local",
    paginationSize:10,
    persistenceMode:"true",
});

并且必须禁用 header 对其中一些进行排序。

类似问题的文档和答案都指向使用

{title:"Name", field:"name", sorter:"string", headerSort:false}

对于要打开排序的列。

我想做的但是没有用

var table = new Tabulator("#main", {
    layout:"fitColumns",
    tooltipsHeader:true,
    pagination:"local",
    paginationSize:10,
    persistenceMode:"true",
    headerSorting:"false",
});

问题：我可以像上面的代码一样通过初始化参数禁用对给定 table 的排序，还是只能通过初始化每一列来实现，我不想这样做，因为 table数量很多，尺寸也不同。

Answer 1

每次创建 table 时，您都应该在列定义中给出 headerSort: false，但是如果您真的想删除排序按钮，您可以运行下面的代码

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];

const col1 = [ //Define Table Columns
  {
    title: "Name",
    field: "name",
    width: 150
  },
  {
    title: "money",
    field: "money",
    align: "left",
    formatter: "money"
  },
  {
    title: "Favourite Color",
    field: "col"
  },
  {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    align: "center"
  },
];

const col2 = [ //Define Table Columns
  {
    title: "Name",
    field: "name",
    width: 150,
    headerSort: false
  },
  {
    title: "money",
    field: "money",
    align: "left",
    formatter: "money",
    headerSort: false

  },
  {
    title: "Favourite Color",
    field: "col",
    headerSort: false

  },
  {
    title: "Date Of Birth",
    field: "dob",
    sorter: "date",
    align: "center",
    headerSort: false

  },
];
const table = new Tabulator("#example-table", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: col1
});
const removeArrow = function() {
  table.setColumns(col2);
}


$('#removeArrow').click(function() {
  removeArrow();
});

<!DOCTYPE html>
<html lang="en">

<script src="https://unpkg.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="example-table"></div>

  <button id="removeArrow">Change Column Definition</button>



</body>

</html>

Answer 2

找到了解决我的问题的方法。没有额外的定义列。

刚刚将此添加到我的第 th 个标签中：

<th tabulator-headersort="false" >@ColumnName</th>

Tabulator 获取元素上的该属性并完全按照我的要求进行操作。

使用 4.2 版仅供参考

Answer 3

<th tabulator-headersort="false" >@ColumnName</th>

是这样做的正确方法在将 Razor 生成的 HTML 表转换为 JS 制表符表并关闭 headers 时。文档没有很好地介绍制表符- HTML 属性的用法，因此有些人可能不会

Tabulator 4.2 中有一个错误修复，驼峰属性可以与 HTML>Tabulator 转换一起使用。 tabulator-headerSort 是在 4.2 bufix 之前不起作用的一个例子。这是一种基于剃须刀模型 returns 而不是在 JS

中完成所有操作的自定义表格的非常巧妙的方法

制表符 - 标题排序

Tabulator - HeaderSorting

javascript

html

tabulator