The data table appears to be malfunctioning when the table collapses

Having trouble with the data table when adding a collapse tr. Removing the collapse tr fixes the data table issue. Any help on how to resolve this would be appreciated.

$('.tableToggleUl').parent('td').css('padding','0px');
        $('.tableToggleUl').hide();
        $('.tableToggleBtn').click(function(){
            $(this).parents('tr').next('tr').find('.tableToggleUl').toggle();
            $(this).toggleClass('fa-plus-circle, fa-minus-circle');
        });
        $('.tableToggleBtn').next('.iconConfirmedAppointments, .fa-clock-o, .iconPracticeRescheduled').css('float','left');
        $('.tableToggleBtn').parent('td').css('width','65px');



  $(document).ready(function () {
        $('.btnApptSuggestion').on("click",function(){

            $validator = $('#frmSuggestionAppt').validate();
            $validator.resetForm();

            var AppID=$(this).data('value');
            var patientID=$(this).data('patient');
            var parentId=$(this).data('parentid');
            var AppointmentDate=$(this).data('sugdate');
               
            $('#SuggestionAppointmentID').val(AppID);
            $('#SuggestPatientID').val(patientID);
            $('#SuggestOtherPatientID').val(parentId);
            $('#dateAppointment').val(AppointmentDate);
        });
        try
        {
            var dTable = $('.reportTable').DataTable({
                "paging": true,
                "bSortable": false,
                "lengthChange": true,
                "bRetrieve": true,
                "bProcessing": true,
                "bDestroy": true,
                "searching": true,
                "ordering": false,
                "info": true,
                "autoWidth": true,
                "responsive": true,
                "aLengthMenu": [[20, 30, 50], [20, 30, 50]]
            });
        }
        catch(e)
        {

        }

 });
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="container">

<table class="table table-bordered table-hover dr-table datatable reportTable dataTable no-footer" id="DataTables_Table_0">
<thead>
                <tr>
                    <th style="padding-left:36px;" class="sorting_disabled">Status</th>
                    <th style="white-space: nowrap;" class="sorting_disabled">Slot Type</th>
                    <th class="sorting_disabled">Professional</th>
                    <th class="sorting_disabled">Patient</th>
                    <th class="sorting_disabled">Date &amp; time</th>
                    <th class="sorting_disabled">Checked In</th>
                    <th class="sorting_disabled">Checked Out</th>
                    <th class="sorting_disabled">Action</th>
                </tr>
            </thead>
<tbody>
<tr role="row">
                            
                            
                                <td style="width: 65px;"><span class="glyphicon glyphicon-plus tableToggleBtn" style="cursor:pointer;"></span><div class="icon iconConfirmedAppointments" 

style="float: left;"></div></td>
                                                            <td><div class="icon iconPatientWithSlot"></div></td>
                            <td>Dr. Doctor Testing </td>
                            <td>
                                <a href="/doctor/patient_detail?encryptid=vkK6vkgyyNyMuKJi1qDQuw%3D%3D">

                                    Miss. Kratika  Aggrawal Sr.

                                </a>
                            </td>
                                <td>July 19 2017 - 11:00 AM</td>
                            <td>
                                
                                                            </td>
                            <td>
                                
                            </td>
                                <td>
                                        <div class="dropdown">
                                            <a class="dropdown-toggle" data-toggle="dropdown">
                                                <i class="fa fa-pencil fa-lg"></i>
                                                <span class="caret"></span>
                                            </a>
                                            <style>
                                                @media only screen and (min-width:150px) and (max-width:991px) {
                                                    .table .dropdown-menu {
                                                        left: 0px !important;
                                                    }
                                                }
                                            </style>
                                            <ul class="dropdown-menu">
                                                    <li>
                                                        <input type="hidden" value="77" class="Status">
                                                        <input type="hidden" value="8886" class="ID">
                                                        <input type="hidden" class="ParentPatientID">
                                                        <a class="lnkChangeStatus" href="#" style="width:auto;">Appointment Status</a>
                                                    </li>
                                                    <li>
                                                        <input type="hidden" value="8886" class="ID">
                                                        <a href="/doctor/dr_otherappointment?encryptid=vkK6vkgyyNyMuKJi1qDQuw%3D%3D" style="width:auto;">Outgoing Referrals</a>
                                                    </li>


                                            </ul>
                                        </div>
                                </td>


                        </tr>
<tr>
                            <td colspan="8" style="padding: 0px;">
                                <ul class="tableToggleUl">

                                    <li>
                                        <label>Report Status</label>
                                            <span></span>
                                    </li>
                                    <li>
                                        <label>Record Uploaded</label>
                                            <span>No</span>
                                    </li>
                                    <li>
                                        <label>Order Received</label>
                                            <span>No</span>

                                    </li>
                                    <li>
                                        <label>Authorization</label>
                                            <span>No</span>
                                    </li>
                                    <li class="tableRow1Height">
                                        <label>Care Plan Uploaded</label>
                                            <span>No</span>

                                    </li>
                                    <li>
                                        <label>Guardian Name</label>
                                            <span></span>                                    </li>
                                    <li>
                                        <label>Referred By</label>
                                            <span>Miss. Kratika  Aggrawal Sr. (Patient)</span>
                                    </li>
                                    <li>
                                        <label>Insurance</label>
                                            <span></span>
                                    </li>
                                    <li>
                                        <label>Visit Reason</label>
                                        <span>abdominal Pain</span>
                                    </li>

                                   
                                   
                                    
                                    <li>
                                        <label>How Did Hear</label>
                                        <span>Market Place</span>
                                    </li>
                                   
                                    <li>
                                        <label>Location</label>
                                        <span> Tester Rd  Snohomish Washington 98290</span>
                                    </li>
                                </ul>
                            </td>
                        </tr>
</tbody>
</table>
</div>

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

jqueryhtmlcsstwitter-bootstrapdatatable

Answer №1

$(document).ready(function() {
$(".tableToggleBtn-tr").click(function(){
    $(".tableToggleUl-td").toggle();
  });
  $('.btnApptSuggestion').on("click", function() {

    $validator = $('#frmSuggestionAppt').validate();
    $validator.resetForm();

    var AppID = $(this).data('value');
    var patientID = $(this).data('patient');
    var parentId = $(this).data('parentid');
    var AppointmentDate = $(this).data('sugdate');

    $('#SuggestionAppointmentID').val(AppID);
    $('#SuggestPatientID').val(patientID);
    $('#SuggestOtherPatientID').val(parentId);
    $('#dateAppointment').val(AppointmentDate);
  });
  try {
    var dTable = $('.reportTable').DataTable({
      "paging": true,
      "bSortable": false,
      "lengthChange": true,
      "bRetrieve": true,
      "bProcessing": true,
      "bDestroy": true,
      "searching": true,
      "ordering": false,
      "info": true,
      "autoWidth": true,
      "responsive": true,
      "aLengthMenu": [
        [20, 30, 50],
        [20, 30, 50]
      ]
    });
  } catch (e) {

  }

});
.tableToggleUl-td { display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">

  <table class="table table-bordered table-hover dr-table datatable reportTable dataTable no-footer" id="DataTables_Table_0">
    <thead>
      <tr>
        <th style="padding-left:36px;" class="sorting_disabled">Status</th>
        <th style="white-space: nowrap;" class="sorting_disabled">Slot Type</th>
        <th class="sorting_disabled">Professional</th>
        <th class="sorting_disabled">Patient</th>
        <th class="sorting_disabled">Date &amp; time</th>
        <th class="sorting_disabled">Checked In</th>
        <th class="sorting_disabled">Checked Out</th>
        <th class="sorting_disabled">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="tableToggleBtn-tr">

        <td style="width: 65px;"><span class="glyphicon glyphicon-plus tableToggleBtn" style="cursor:pointer;"></span>
          <div class="icon iconConfirmedAppointments" style="float: left;"></div>
        </td>
        <td>
          <div class="icon iconPatientWithSlot"></div>
        </td>
        <td>Dr. Doctor Testing </td>
        <td>
          <a href="/doctor/patient_detail?encryptid=vkK6vkgyyNyMuKJi1qDQuw%3D%3D">

                                    Miss. Kratika  Aggrawal Sr.

                                </a>
        </td>
        <td>July 19 2017 - 11:00 AM</td>
        <td>

        </td>
        <td>

        </td>
        <td>
          <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-pencil fa-lg"></i>
              <span class="caret"></span>
            </a>
            <style>
              @media only screen and (min-width:150px) and (max-width:991px) {
                .table .dropdown-menu {
                  left: 0px !important;
                }
              }
            </style>
            <ul class="dropdown-menu">
              <li>
                <input type="hidden" value="77" class="Status">
                <input type="hidden" value="8886" class="ID">
                <input type="hidden" class="ParentPatientID">
                <a class="lnkChangeStatus" href="#" style="width:auto;">Appointment Status</a>
              </li>
              <li>
                <input type="hidden" value="8886" class="ID">
                <a href="/doctor/dr_otherappointment?encryptid=vkK6vkgyyNyMuKJi1qDQuw%3D%3D" style="width:auto;">Outgoing Referrals</a>
              </li>


            </ul>
          </div>
        </td>


      </tr>
      <tr>
        <td colspan="8" style="padding: 0px;"  class="tableToggleUl-td">
          <ul class="tableToggleUl">

            <li>
              <label>Report Status</label>
              <span></span>
            </li>
            <li>
              <label>Record Uploaded</label>
              <span>No</span>
            </li>
            <li>
              <label>Order Received</label>
              <span>No</span>

            </li>
            <li>
              <label>Authorization</label>
              <span>No</span>
            </li>
            <li class="tableRow1Height">
              <label>Care Plan Uploaded</label>
              <span>No</span>

            </li>
            <li>
              <label>Guardian Name</label>
              <span></span> </li>
            <li>
              <label>Referred By</label>
              <span>Miss. Kratika  Aggrawal Sr. (Patient)</span>
            </li>
            <li>
              <label>Insurance</label>
              <span></span>
            </li>
            <li>
              <label>Visit Reason</label>
              <span>abdominal Pain</span>
            </li>


            <li>
              <label>How Did Hear</label>
              <span>Market Place</span>
            </li>

            <li>
              <label>Location</label>
              <span> Tester Rd  Snohomish Washington 98290</span>
            </li>
          </ul>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script enter code heresrc="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

let's hope this is effective

Answer №2

When looking at Allan's response on the topic of DataTables and colspan, it becomes clear that Datatable does not currently support the use of colspan. The complexity arises from how sorting and filtering would be affected by columns spanning multiple cells. This raises questions about which column the data should belong to for sorting and filtering purposes.

Your issue may lie in your usage of colspan, as shown here:

<td colspan="8" style="padding: 0px;"  class="tableToggleUl-td">

This could be the reason for the malfunctioning of the datatable on your end.

Although incorporating colspan is currently not feasible, you can explore using Complex headers if you require merged table headers.

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

The current media breakpoints are not performing as expected

Could someone help me unravel this simple issue I seem to be having? My page layout is functioning correctly, but when I apply media breakpoints, nothing changes. Here's an example of my CSS where I am just adjusting the font size in an attempt to mak ...

cssbreakpointsbootstrap-5

Do I really need to use backbone.js in my project?

Lately, I've become intrigued by backbone.js while working on a webapp. Now as I embark on a new project, I'm contemplating delving deeper into the world of backbone.js. Currently, I'm in the midst of a 3-part screencast tutorial on creating ...

jquerybackbone.js

Personalize the loading bar using JavaScript

Currently, I am utilizing a basic progress bar from Bootstrap. However, I have the desire to design a custom progress bar similar to this: Unfortunately, I am uncertain about how to create such a unique progress bar. Perhaps there is an existing JavaScri ...

javascriptjqueryangularjstwitter-bootstrap

Calculating the size of a POST request payload

I have an object that looks like this: { "Id": 1, "Value": 10, "UId" : "ab400" } How can I calculate the length of this object so that I can send it in an ajax request? $.ajax({ url: 'http://example.com/api/data', type:"PO ...

javascriptjqueryajax

Halt! There is a Syntax Error: anticipating an expression, but instead received the keyword 'for'

I'm encountering an issue with this code. I need help to figure out how to print a loop inside dynamiHTML. Can anyone assist me? function createDiv(data){ var dynamicHTML = ''; alert(data.res2.length); dynamicHTML += '<div ...

javascriptjqueryajaxcodeigniter

Is there a way to verify the presence or absence of content in a DNN template editor token?

I created a form where individuals can input data, and each field is assigned a token. For instance, if someone enters their name in a textbox labeled as "name," using the [NAME] token will display the entered name on another page. Currently, I am working ...

jqueryhtmltokendotnetnuke

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle

Hey there, I'm new to this and could really use your assistance, I'm looking for a simple show/hide toggle feature when clicking on an image, where it switches between a 'side arrow' and a 'down arrow' (similar to a dropdown) ...

javascriptjqueryhtmlcss

Access Denied (missing or incorrect CSRF token): /

After encountering an error while trying to copy code from a website in order to create models for a file upload form for mp3 files, I received the following error messages: Forbidden (403) CSRF verification failed. Request aborted. The reason provided fo ...

htmldjangodjango-modelsaudiodjango-forms

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

Dynamics of Rails and the power of jQuery with ajaxStop

For my Rails 5.2 project, I have included the gems 'jquery-rails' and 'jquery-ui-rails'. I am attempting to utilize the .ajaxStop( handler ) handler as outlined in the documentation found here: https://api.jquery.com/ajaxStop/#ajaxStop ...

javascriptjqueryruby-on-railsajax

Bootstrap Toggle appears on screens of medium size

While working on creating a responsive dashboard with Bootstrap 4.3, I encountered an issue specifically with medium screens. Upon resizing Google Chrome to test the page at various sizes, I noticed that the bootstrap toggle button would unexpectedly appea ...

cssbootstrap-4toggle

Utilize either the success() or complete() method when making an AJAX call

Can someone please explain the AJAX call below, specifically focusing on the complete() method? I've noticed that replacing complete() with success() results in an empty responseText, similar to when using the AJAX error() method. However, if I keep ...

jqueryajax

Incorporating an image within a table while maintaining 100% height: A step-by-step guide

I'm struggling to make the image fit 100% to the height of a CSS-created table. The table and image seem to be ignoring the dimensions of the parent element, as shown below. Since everything needs to be dynamic, I am working with percentages. .img ...

htmlcssimagecss-tables

Update the JSON request

I have a setup where I load images through JSON into #photographs. The initial load consists of 10 images, and when you scroll down to a certain point (using waypoints), I want to refresh the JSON feed to load an additional 5 images. I achieve this by upda ...

jqueryjsonloadrefresh

Unlimited icon carousel crafted with CSS

Currently, I have a set of 10 icons that are scrolling horizontally from right to left. However, I am encountering an issue where at the end of the icon loop, there is a space causing the icons to jump back to the beginning. I am looking for a solution to ...

htmlcssinfinite-scroll

The mysterious ASP.net Ajax method that eludes discovery

Having experience with numerous ajax calls in the past, I have encountered an issue with this particular one =( I'm seeking advice on what changes need to be made to get this specific ajax call to work. In my previous attempts, I faced an internal s ...

c#jqueryasp.netajax

DOM is set for Jquery activation

I'm dealing with an issue in JQuery that I recently started working on. I have a large HTML page with a widget at the beginning, but when I use document.ready, it waits for the entire page to load before executing, which takes too long. Is there a wa ...

jquerydomready

What is causing this code to keep iterating endlessly?

I have a basic jquery script embedded in my HTML code that utilizes the cycle plugin for jQuery. The problem I'm facing is that when I interact with the slideshow using the "next" or "previous" buttons, it continues to loop automatically after that in ...

javascriptjqueryhtmlwebcycle

Implementing the functionality to allow users to submit and delete comments using AJAX and PHP

I have implemented a php code to display all comments on any post from my MySQL database. Now, I would like to add a submit button to each comment for users to delete it without having to reload the page. I want to achieve this using AJAX but struggling wi ...

ajaxjquery

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript

I am looking to simulate the pressing of the enter key in a text field when a page is loaded. Essentially, I want the text field to automatically trigger the enter key press event as if it had been pressed on the keyboard by the user. Below is an example o ...

javascriptjquery