Tips for embedding 2 rows within a <td> element in a DataTables table

Here's a unique layout I want to achieve using the DataTables plugin.

https://i.sstatic.net/YxfOk.png

Notice how the address spans across 3 columns.

This html code disrupts the sorting feature of DataTables and causes the table to shift.

Here's a similar example with different data.

<tr>
  <td colspan="3">
     <table cellpadding="0" cellspacing="0">
         <tr>
           <td >Lorem ipsum dolor sit amet</td>
         </tr>
         <tr>
           <td>John Doe</td>   
           <td>Developer</td>
           <td>New York</td>
         </tr>
    </table>
  </td>

  <td>29</td>
  <td>2020/12/15</td>
  <td>$120,000</td>
</tr>

https://i.sstatic.net/icYzQ.png

Update

The gray text is not a category. It should be included with every item in the table (each row).

jqueryhtmlcssdatatables

Answer №1

If you want to group rows in a table based on certain data points, you can utilize the RowGroup extension available in DataTables. This extension allows you to easily organize rows according to specific criteria.

RowGroup

The RowGroup feature in DataTables provides users with a convenient way to visualize the data structure and display summaries for each group. You can customize the starting and ending rows of each group, integrating summarized data seamlessly into your website.

By using the rowGroup option as an object, you can configure various settings to control the appearance and data source of the row group. Refer to all available options here.

Below is an example to help you understand the implementation:

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>

Answer №2

Take a cue from this:
try concealing your td using 

<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 outcome (Reversed Row) you see is because DataTable is arranged by the First Column
You are able to MODIFY this.

Answer №3

add two extra empty td cells like so:

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

If that doesn't work, you can use the width attribute in styling, for example:

   <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>Accountant</td>
       <td>London</td>
     </tr>

Answer №4

Unfortunately, my reputation is not high enough to leave a comment, so I'll just share a helpful link with you: this one

When using drawCallback, remember to append your <td> before the specific row where you want it to appear.

If you could provide me with your jQuery Code, I could give you more detailed advice.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can Ajax utilize to make asynchronous requests and receive synchronous responses?

While using jQuery ajax to send a request to a web service, I came across an interesting bug: var AjaxResult; login = function () { AjaxResult = ""; $.ajax({ type: "POST", url: KnutBase.getServiceUrl() + "ServiceInterface/HmsPlanne ...

javascriptjqueryajaxjsonp

Instructions for populating a DataTable with JSON data while allowing for editing of rows

Hey there, looking for some expert advice, I've been experimenting with the datatable plugin and I'm curious if it's feasible to populate a table with row editing actions using ajax? This is the code snippet I currently have. It successfull ...

javascriptjqueryjsonajaxdatatable

Choose a newly added item from the selection

Here is a select menu: <select id="club"> <option>&nbsp;</option> <option value=bla1>bla1</option> <option value=bla2>bla2</option> </select> In order to add an item as the fir ...

jquery

Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Having some trouble setting up capybara-webkit on my Rails 4.2.1 app. Tests are running fine, links are being clicked, and ajax calls are working, but there's one odd issue with capybara-screenshot gem. I wanted to capture html screenshots with all as ...

cssruby-on-railsajaxasset-pipelinecapybara-webkit

Extracting information from JSON ( AngularJS)

I have a collection of questions stored in my JSON file, but I want to display only one at a time until the user selects the correct answer and proceeds to the next question. Here is the HTML template: <div ng-controller="quizController"> <ul> ...

jsonangularjshtml

Avoid Conversion of HTML Entities in Table Cells

<table> <tr> <td>&gt;</td> </tr> <tr> <td>&&#xfeff;GT</td> </tr> </table> In the code snippet above, I have table cells containing HTML entities. A re ...

javascripthtmlangularjs

Is it feasible to submit a request without needing to redirect the page or relying on JavaScript?

I am attempting to send a post request to an API. This is what I have so far: <form method="POST" action="/api/updoot/ID:{{ post.ID }}"> <input type="submit" value="updoot"/> </form> Upon clicking submit, it redirects. While I can p ...

htmlhttp

Set meanmenu to a fixed position

I am currently utilizing the meanmenu plugin to create a responsive menu for mobile devices. My goal is to fix the position of the menu at the bottom of the page so that users can easily access it. However, when I set the position of the meancontainer to ...

jqueryhtmlcsspositionfixed

Extracting data from a continually updating DataTable spanning multiple pages with a consistent URL

Currently, I have experience working with C and am in the process of learning Python as a hobby. My latest project involves scraping data from a dynamically generated table on https://www.justetf.com/it/find-etf.html?groupField=index&from=search&/i ...

pythonseleniumbeautifulsoupdatatablesscreen-scraping

Issue: The jQuery function with the ID jQuery1830649454693285679_1359620502896 did not receive a JSON

After going through numerous Q&As on the same problem, I couldn't find a solution specific to my issue. The situation involves a PHP script that outputs a JSON string: header('Content-Type: application/json'); echo $result; Here is th ...

phpjqueryajaxjsonparse-error

Excessive content - letter "y" disrupts the row layout on mobile devices

I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow. While everything looks fine on a desktop, the layout breaks o ...

htmlcssbootstrap-4

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

javascripthtml

Avoid refreshing the page when clicking on an anchor tag in Vue.js

I have the code below in my Vue file. The problem I am encountering is that the page reloads whenever I click on the link. I have tried using event.preventDefault() but it did not solve the issue. Can someone please help me identify what I am doing wrong ...

javascripthtmlvue.jsvuejs2vue-component

A guide on incorporating the CSS 'content' property with the 'option' tag

Is it possible to include CSS 'content' in the 'option' tag? For example, I want to display "Name: Volvo". <html> <head> <style> option:before { content: "Name: "; } </style> </head> <body> ...

htmlcss

Utilize $.getJSON() to await a response

I'm working on incorporating JSON with PHP. Currently, I am aiming to generate a graph using the following plugin: The issue is that the graph is being plotted before the new data is received. Is there a way for jQuery to wait for the $.getJSON() me ...

jqueryjsongetjson

Is it possible for Penthouse to retrieve critical CSS while using javascript?

I am currently utilizing the laravel-mix-criticalcss npm package to extract the critical CSS of my website. This package leverages Penthouse under the hood, and you can configure Penthouse settings in your webpack.mix.js within the critical options. The ...

javascriptcssnpmlaravel-mixcritical-css

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...

htmlcss

The feature of interpolation within attributes has been eliminated. Please use either v-bind or the colon shorthand in its place

I am struggling to grasp how I can pass a value to Vue using HTML. I keep encountering this error message: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. Edit: I am trying to pass the value "country" to the Vu ...

htmlvue.js

What is the best method to determine the time difference between two timestamps using JavaScript?

Could you kindly show me how to calculate the difference between two times using JavaScript? I have attempted to find a solution, but I am encountering errors. Here is the code snippet from my fiddle: Visit my jsFiddle var currentTime = new ...

javascriptjquery

The JSON object returned by the Ajax call is undefined: object

Despite my best efforts, the JSON value either returns as unidentified or doesn't display at all Below is the PHP code: $index=0; while($row = $result->fetch_array()){ $index++; $data=array( array( $index=>$row[ ...

phpjqueryjsonajaxmysqli