CODEWITHSUNDEEP
jqueryhtmlcssdatatables
kirqe
kirqe

Reputation: 2470

How to nest 2 rows inside of <td> in DataTables table?

Here's a structure that I want to archive coupled with DataTables plugin.

enter image description here

As you can see the address it taking 3 columns.

The following html break datatables sorting functionality. And the table looks shifted.

Here's an example with different data but the idea is the same.

<tr>
  <td colspan="3">
     <table cellpadding="0" cellspacing="0">
         <tr>
           <td >Some very long lorem ipsum text</td>
         </tr>
         <tr>
           <td>Angelica Raaaaamos</td>   
           <td>Accountant</td>
           <td>Tokyo</td>
         </tr>
    </table>
  </td>

  <td>33</td>
  <td>2008/11/28</td>
  <td>$162,700</td>
</tr>

enter image description here

upd

The grey text is not a group. Every item in a table(every row) should have it included

Upvotes: 0

Views: 2925

Answers (4)

DavidDomain
DavidDomain

Reputation: 15293

You can use the RowGroup extension which will let you group rows by given data point.

RowGroup

The ability to group rows in a table can let an end user quickly and easily see the structure of the data shown, and also present them with summaries of the data shown in each group. RowGroup adds this ability to DataTables with the ability to customise the start and end grouping rows displayed in the DataTable, letting you integrate the summarised data to fit perfectly in with your site.

Using the rowGroup option as an object, will give you the ability to use a couple of options to define the look and source data for the row-group. For all the available options take a look here.

Here is an example, sure you'll get the idea. ;)

var dataSet = [
  [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800", "Foo foo foo foo bla bla" ],
  [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750", "Some very long lorem ipsum text" ],
  [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000", "Bar bar bar bar bla bla" ],
]

$('#example').DataTable({

  data: dataSet,
  columns: [
    { title: "Name" },
    { title: "Position" },
    { title: "Office" },
    { title: "Extn." },
    { title: "Start date" },
    { title: "Salary" },
  ],
  rowGroup: {
    startRender: function(row, group) {
      if(typeof group == "string") {
        return $('<tr/>')
          .append('<td colspan="6"><span>' + group + '</span></td>');
      }
    },
    endRender: null,
    className: 'table-group',
    dataSrc: 6
  }

});
table.dataTable tbody th, table.dataTable tbody .table-group td {
    padding: 0;
}

table.dataTable tbody th, table.dataTable tbody .table-group td span {
    padding: 8px 10px;
    display: block;
    color: silver;
}

table.dataTable tbody tr:nth-child(4n),
table.dataTable tbody tr:nth-child(4n-1) {
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/rowgroup/1.0.0/css/rowGroup.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.0/js/dataTables.rowGroup.min.js"></script>

<table id="example" class="" cellspacing="0" width="100%"></table>

Upvotes: 1

Shantaram Tupe
Shantaram Tupe

Reputation: 1666

You can get an idea from here:
try to hide your td as <td style='display:none;'></td>

$( function(){
	$('#id-table').DataTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>


<table id='id-table' border='1'>
<thead>
<tr>
    <th>Angelica Raaaaamos</th>   
    <th>Accountant</th>
    <th>Tokyo</th>
  </tr>
</thead>
<tbody>
  <tr>
   <td colspan="3">Some very long lorem ipsum text</td>
   <td style='display:none;'></td>
   <td style='display:none;'></td>
  </tr>
  <tr>
    <td>Angelica Raaaaamos</td>   
    <td>Accountant</td>
    <td>Tokyo</td>
  </tr>
  </tbody>
</table>

This result (Reversed Row) you get is bcoz, DataTable is sorted on First Column
You can CHANGE it.

Upvotes: 1

Ch3micaL
Ch3micaL

Reputation: 323

I would have simply put this in a comment, but since my reputation is too low i'll suggest you to take a look at this

In the drawCallback you have to append your <td> before the row you want it to be in.

I could be more specific if I had your jQuery Code

Upvotes: 0

Tazwar Utshas
Tazwar Utshas

Reputation: 961

use two extra blank td there. like:

 <tr>
   <td >Some very long lorem ipsum text</td>
   <td></td>
   <td></td>
 </tr>

if it doesn't work, then use width in styling. like:

   <tr >
       <td style="width:50px">Some very long lorem ipsum text</td>
       <td></td>
       <td></td>
     </tr>
      <tr >
       <td style="width:50px">Some</td>
       <td>Acountant</td>
       <td>london</td>
     </tr>

Upvotes: 0

Related Questions