如何将 rowGroup 与 DataTables 一起使用，以便 rowGroup 分隔符向右对齐？答案

【问题标题】：How to use rowGroup with DataTables so that the rowGroup dividers are aligned to the right?如何将 rowGroup 与 DataTables 一起使用，以便 rowGroup 分隔符向右对齐？
【发布时间】：2019-02-04 19:55:22
【问题描述】：

我正在使用 DataTables Row Group 功能来创建一个分为多个部分的表。

我目前的结果如下：

但是，我想将分隔线部分向右对齐（见下文）

我正在尝试通过使用 text-align:right 来完成此结果；如 this question 中所述，但使用 text-align:right 似乎不起作用

下面是我的代码和here for my jsfiddle

<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>
      <script>
      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,
      rowGroup:  {
      startRender: null,
      endRender: function ( rows, group ) {

      return $('<tr/>')
        .append( '<td style="text-align:right;" colspan="2">Im trying to pull this to the right</td>');

        },
        dataSrc:'office',
        },
        columns: [
        { data: "position",title:'position'},
        { data: "extn" ,title:'extn'},
        { data: "first_name",title:'Name'},
        { data: "office",title:'office'},
        ]
        });
        </script>
      </body>
    </html>

【问题讨论】：

标签： javascript html css html-table datatables

【解决方案1】：

退货时，您需要在下方添加额外的<td> 标签。像这样：

table = $("#example").DataTable({
  data: data,
  rowGroup:  {
            startRender: null,
            endRender: function ( rows, group ) {

             return $('<tr/>')
                 .append( '<td style="text-align:right;" colspan="2">Im trying to pull this to the right</td>')
                 .append('<td></td>')
                 .append('<td></td>');
            },
            dataSrc:'office',
        },
  columns: [
    { data: "position",title:'position'},
    { data: "extn" ,title:'extn'},
    { data: "first_name",title:'Name'},
    { data: "office",title:'office'},

  ]
});

【讨论】：