jquery - tr 崩溃时数据表不工作-6ren

jquery - tr 崩溃时数据表不工作

转载作者：行者123 更新时间：2023-11-28 03:21:31

添加折叠 tr 时数据表不工作。如果 remvoe collapse tr 那么数据表工作正常如何修复它任何人都可以提供帮助提前致谢...

$('.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>

最佳答案

$(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>

希望它的工作

关于jquery - tr 崩溃时数据表不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45188596/

文章推荐： jquery - 选择不是当前元素/JQuery 父级的先前标题

文章推荐： html - 在溢出图像上水平滚动 - HTML/CSS

文章推荐： html - 在不使用溢出隐藏属性的情况下禁用水平滚动

文章推荐： javascript - 在 Javascript 中为对象数组创建不同的源

jquery - CoffeeScript 与 jQuery、jQuery ($) 和 jQuery
在带有 jQuery 的 CoffeeScript 中，以下语句有什么区别吗？ jQuery ($) -> jQuery -> $ - > 最佳答案第一个与其他两个不同，就像在纯 JavaScr
jquery - jQuery 为什么叫 jQuery？名字的由来是什么？
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭13 年前。 Improve th
jquery - jQuery 插件和 jQuery 小部件之间的区别？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
jquery - jQuery 生产和 jQuery 开发之间的区别？
这个问题可能听起来很愚蠢，但请耐心等待，因为我完全是初学者。我下载了两个 jQuery 版本，开发版本和生产版本。我想知道作为学习 jQuery 的初学者，什么更适合我。最佳答案如果您对 jQue
jquery - jQuery Mobile 使用什么版本的 jQuery？
The documentation说要使用 1.6.4，但我们现在已经升级到 1.7.2。我可以在 jQuery Mobile 中使用最新版本的 jQuery 吗？最佳答案您当然可以，但如果您想
jquery - jquery 新手 - jquery 弹出
我在这里看到这个不错的 jquery 插件:prettyphoto jquery lightbox有没有办法只用一个简单的jquery来实现这样的效果。我只需要弹出和内联内容。你的回复有很大帮助。
jquery - 使用 jQuery 附加 jQuery
很明显我正在尝试做一些 jQuery 不喜欢的事情。我正在使用 javascript 上传图片。每次上传图片时，我都希望它可见，并附加一个有效的删除脚本。显示工作正常，删除则不然，因为当我用 fir
jquery - jQuery 数组和 jQuery 对象之间的技术区别是什么？
这两个哪个是正确的？ jQuery('someclass').click(function() { alert("I've been clicked!"); }); 或 jQuery('somec
jquery - if (jQuery)(function ($) { . . .})(jQuery);插件格式
我正在寻找一个具有以下格式的插件 if (jQuery)(function ($) { -- plugin code -- })(jQuery); 我明白 (function ($)
jquery - 使用哪个版本的 jQuery/jQuery UI？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭10 年前。 Improv
jQuery + jQuery 表单提交插件 + jQuery 验证插件
我知道这个问题已经被问过几次了，但想知道您是否可以帮助我解决这个问题。背景:我尝试创建一个使用 Ajax 提交的表单(jQuery 表单提交)。我已经工作得很好，然后我想在表单上得到验证。我可以使用
jquery - jquery 元数据插件和 jquery 验证插件的主要烦恼
我正在使用无处不在的jquery validate plugin用于表单验证。它支持使用metadata plugin用于向表单元素添加验证规则。我正在使用此功能。当验证查找这些规则时，它会对元素进
jquery - 使用 jQuery 还是不使用 jQuery？
我更喜欢为我一直在开发的网络社区添加实用的视觉效果，但随着事情开始堆积，我担心加载时间。拥有用户真的更快吗加载(希望是缓存的)副本来自 Google 存储库的 jquery？是否使用 jQuery
jquery - 有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery Mobile
这个问题已经有答案了: Slide right to left? (17 个回答) 已关闭 9 年前。你能告诉我有没有办法在 jQuery 中左右滑动而不使用 jQuery UI 和 jQuery
jquery - XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别
我如何找出最适合某种情况的方法？任何人都可以提供一些示例来了解功能和性能方面的差异吗？最佳答案 XMLHttpRequest 是原始浏览器对象，jQuery 将其包装成一种更有用和简化的形式以及跨浏
jquery - 为什么我在 Assets 安装时无法解析 'jQuery=jquery'？
运行时 php bin/console oro:assets:build ，我有 11 个这样的错误: ERROR in ../node_modules/jquery-form/src/jquery.
jquery - jQuery.ajax 在 jQuery 源代码中的哪里定义？
我试图找到 jQuery.ajax() 在源代码中的定义位置。但是，使用 grep 似乎不起作用。在哪里？谢谢。 > grep jQuery.ajax src/* src/ajax.js:// B
jquery - 从单独的 jQuery 对象创建 jQuery 对象集合
$.fn.sortByDepth = function() { var ar = []; var result = $([]); $(this).each(function()
jquery - jQuery.one() 和 jQuery.on() 之间的区别
我的页面上有多个图像。为了检测损坏的图像，我使用了在 SO 上找到的这个。 $('.imgRot').one('error',function(){ $(this).attr('src','b
jquery - jQuery 如何实现将 $ 设为 jQuery 函数的别名？
我在理解 $ 符号作为 jQuery 函数的别名时遇到了一些麻烦，尤其是在插件中。你能解释一下 jQuery 如何实现这种别名:它如何定义 '$' 作为 jQuery 函数的别名？这是第一个问题。其

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - tr 崩溃时数据表不工作