代码之家 › 专栏 › 技术社区 › Massifox

如何在数据表中将ordercells设置为中间行?

datatables-1.10 datatables jquery javascript

Massifox · 技术社区 · 6 年前

我正在使用 DataTables . 我希望排序链接到第二个跨度行,这意味着在名字细胞而不是笨蛋 .

代码:

$(document).ready(function () {
  var table = $('#example').DataTable({
    orderCellsTop: true, //move sorting to top header
  });
});

HTML:

<table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Dummy</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
      <tr>
        <th>Name1</th>
        <th>Position1</th>
        <th>Office1</th>
        <th>Age1</th>
        <th>Start date1</th>
        <th>Salary1</th>
      </tr>
    </thead>
    .....

这里是一个 live demo .

1 回复 | 直到 6 年前

Prashant Pokhriyal 6 年前

你可以做点小调整

添加 colspan=2 到笨蛋页眉:
```
<th colspan="2">Dummy</th>
```
现在在后面添加一个空标题名字和 NAME1 页眉:
```
<th>Name</th>
<th></th>
```
同样,在名字专栏:
```
<td>Tiger Nixon</td>
<td></td>
```

最后,添加 columnDefs 数据表初始化选项:

columnDefs: [{ 
  visible: false, 
  targets: 1 
}]

最终代码如下:

$(document).ready(function() {
  var table = $('#example').DataTable({
    orderCellsTop: true,
    columnDefs: [{
      visible: false,
      targets: 1
    }]
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <div class="container">
    <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th colspan="2">Dummy</th>
        </tr>
        <tr>
          <th>Name</th>
          <th></th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
        <tr>
          <th>Name1</th>
          <th></th>
          <th>Position1</th>
          <th>Office1</th>
          <th>Age1</th>
          <th>Start date1</th>
          <th>Salary1</th>
        </tr>

      </thead>

      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td></td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td></td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
        </tr>


      </tbody>
    </table>
  </div>
</body>

</html>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前