Question

我正在使用datatables javascript库来构建表。

将“ rowsGroup”与this answer一起用于垂直合并重复的单元格（例如，下表中“办公室”字段中的纽约已合并为Garrett，Chris和Tiger）。
我还成功地使用了'rowGroup'将表分为办公小节（rowsGroup plugin）

有关最终结果，请参见下文 documentation

问题是小计行中有重复的行（例如，纽约重复了两次，但应该只显示一次）

请参见下面的代码和

HTML

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.css"
  />

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.rawgit.com/ashl1/datatables-rowsgroup/fbd569b8768155c7a9a62568e66a64115887d7d0/dataTables.rowsGroup.js"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">

        <table id="example" class="display" style="width:100%">
        </table>
      </div>
    </div>
  </div>

</body>

</html>

JavaScript

      data = [{
    DT_RowId: "row_1",
    first_name: "Garrett",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "New York",
    extn: "8422",
  },
  {
    DT_RowId: "row_2",
    first_name: "Chris",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "New York",
    extn: "8422",
  },
  {
    DT_RowId: "row_3",
    first_name: "Tiger",
    position: "Analyst",
    email: "g.winters@datatables.net",
    office: "New York",
    extn: "8422",
  },
  {
    DT_RowId: "row_4",
    first_name: "Bob",
    position: "Analyst",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
  }]

table = $("#example").DataTable({
  data: data,
  rowsGroup: [0,1,2],
  rowGroup:  {
            dataSrc:'office',
        },
  columns: [
    { data: "office",title:'office'},
    { data: "position",title:'position'},
    { data: "extn" ,title:'extn'},
    { data: "first_name",title:'Name'}
  ]
});

如何在没有重复的小计行的情况下利用Datatables库的rowsGroup和rowGroup参数？

0 个答案: