Datatable failing with rowspan

问题:

I am using jQuery DataTables to render my grid data and am using the concept of rowspan with rowsGroup option. Its spanning some rows and look good but after some rows its failing.

I followed these examples:

• http://live.datatables.net/bodanole/1/edit
• How to add Rowspan in JQuery datatables

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
      'ProductId:name',
      'ProductDescription:name',
      'FeatureSetId:name',
      'FeatureSetCode:name'
    ],
    pageLength: '20',
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

/** Hide console */
.as-console-wrapper { display: none !important; }

<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//cdn.mcfcloud.com/jquery-1.11.2/external/jquery/jquery.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>

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

It spans till the Product Description column and then fails to span. I want it to span Feature ID, Feature Code and lot of other columns.

回答1:

Datatables can apply rowspan only on unique values for each row, if any rowspan column has differnt value then it will not work, see below snippet in which I have applied rowspan on Item Number and Description, and last 2 rows have common values(290015 and XXX5) so rowspan work fine.

$(document).ready(function() {
  var resultArray = [
    ["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "F1 id", "F1 code", "F1 name", "F1 desc", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5 id", "XXX5", "XXX name", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
    ["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "CC 1", "Code2", "Name", "Desc", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
  ];

  console.log(JSON.stringify(resultArray));
  var table = $('#example').DataTable({
    columns: [{
      title: 'Item Master Number',
      name: 'ItemMasterNumber'
    }, {
      title: 'Description',
      name: 'Description'
    }, {
      title: 'First Processing Date',
      name: 'FirstProcessingDate'
    }, {
      title: 'Alias',
      name: 'Alias'
    }, {
      title: 'Master Price',
      name: 'MasterPrice'
    }, {
      title: 'Product Id',
      name: 'ProductId'
    }, {
      title: 'Product Description',
      name: 'ProductDescription'
    }, {
      title: 'Feature Set#',
      name: 'FeatureSetId'
    }, {
      title: 'Feature Set Code',
      name: 'FeatureSetCode'
    }, {
      title: 'Feature Set Name',
      name: 'FeatureSetName'
    }, {
      title: 'Feature Set Description',
      name: 'Feature Set Description'
    }, {
      title: 'Enablement Type',
      name: 'Enablement Type'
    }, {
      title: 'Feature Id',
      name: 'FeatureId'
    }, {
      title: 'Attribute Name',
      name: 'AttributeName'
    }, {
      title: 'Attribute Value',
      name: 'AttributeValue'
    }],
    data: resultArray,
    rowsGroup: [
      // Always the array (!) of the column-selectors in specified
      // order to which rows groupping is applied.
      // (column-selector could be any of specified in:
      // https://datatables.net/reference/type/column-selector)
      'ItemMasterNumber:name',
      'Description:name'
    ],
    pageLength: '20',
  });
});

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
}

/** Hide console */
.as-console-wrapper { display: none !important; }

<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//cdn.mcfcloud.com/jquery-1.11.2/external/jquery/jquery.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>

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