如何防止行计数在可折叠的dataTable中计数两次？

问题描述

我正在处理可折叠的dataTable。 dataTable的行计数功能也在对可折叠行进行计数！

这是我的小提琴：https://jsfiddle.net/helloIndia/13kf5Lto/11/

代码：`

<div class="tab-content mt-5" id="myTabContent">
  <div class="tab-pane fade show active" id="kt_tab_pane_all" role="tabpanel" aria-labelledby="kt_tab_pane_all">
    <div class="Inner_kt_tableR">
      <div class="Inner_kt_tableR_top">
        <div class="row">
          <div class="col-sm-6">
            <div class="Inner_kt_tableR_top_inner">
              <a href="javascript:void(0);" data-toggle="modal" data-target="#addstaffModal" class="form_brntnxd minwdth mrbtmklright">Add</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Archive</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Export</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn mrbtmklright">Import</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn" data-toggle="modal" data-target="#addfilterfModal">Filters • 3</a>
              <div class="f_p_searchk"><input type="text" class="form-control" placeholder="Search"><i class="fas fa-search"></i></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="cool_page_nitionsd_main">
              <div class="cool_page_info" id="student_page_info"></div>
              <div class="cool_page_nitionsd" id="student_page_nitionsd"></div>
              <div class="cool_page_viewd" id="student_page_viewd"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="dt_kdtable forcheckqbox">
        <!--begin: Datatable-->
        <table class="table table-checkable setclose" id="allstudent_dt" style="border-collapse:collapse;">
          <thead>
            <tr>
              <th class="dt-left" rowspan="1" colspan="1" style="width: 30px;">
                <label class="checkbox checkbox-single">
                  <input type="checkbox" value="" class="group-checkable">
                  <span></span>
                </label>
              </th>
              <th></th>
              <th>Name</th>
              <th>Status</th>
              <th>Exp.</th>
              <th>Level</th>
              <th>Date Added</th>
              <th>Last Contact</th>
              <th>&nbsp;</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>
                <label class="checkbox checkbox-single">
                  <input type="checkbox" value="" class="group-checkable">
                  <span></span>
                </label>
              </td>
              <td class="accordion-toggle collapsed " data-toggle="collapse" data-target="#demo1"> 
              </td>
              <td><a href=""> John Doe </a></td>
              <td>Active</td>
              <td>12/01/2020</td>
              <td>100%</td>
              <td>Oct 27,2020</td>
              <td>Dec 31,2020</td>
              <td>
                <a href="">
                  <img src=""></a>
              </td>
            </tr>

            <tr class="hide-table-padding">
              <td colspan="9">
                <div class="collapse set_format_clool_main accordian-body" id="demo1">
                  <table cellpadding="5" cellspacing="0" border="0" style="padding-left: 50px;">
                    <tbody>
                      <tr class="set_format_clool">
                        <td>Amount Paid</td>
                        <td>$ 1,500.00</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Credits Paid</td>
                        <td>21 / 109</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Expiration</td>
                        <td>June 2024</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Email</td>
                        <td>[e-mail]</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Phone Number</td>
                        <td>[phone]</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>College</td>
                        <td>Community College</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
            </tr>

            <tr>
              <td>
                <label class="checkbox checkbox-single">
                  <input type="checkbox" value="" class="group-checkable">
                  <span></span>
                </label>
              </td>
              <td class="accordion-toggle collapsed sorting_1" id="accordion2" data-toggle="collapse" data-target="#demo2"> 
              </td>
              <td><a href=""> William Santiago </a></td>
              <td>Active</td>
              <td>12/01/2020</td>
              <td>100%</td>
              <td>Oct 27,2020</td>
              <td>
                <a href="">
                  <img src=""></a>
              </td>
            </tr>

            <tr class="hide-table-padding">
              <td colspan="9">
                <div class="collapse set_format_clool_main accordian-body" id="demo2">
                  <table cellpadding="5" cellspacing="0">
                    <tbody>
                      <tr class="set_format_clool">
                        <td>Amount Paid</td>
                        <td>$ 1,500.00</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Credits Paid</td>
                        <td>21 / 109</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Expiration</td>
                        <td>June 2024</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Email</td>
                        <td>[e-mail]</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>Phone Number</td>
                        <td>[phone]</td>
                      </tr>
                      <tr class="set_format_clool">
                        <td>College</td>
                        <td>Community College</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </td>

              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
              <td style="display: none;"></td>
            </tr>

          </tbody>

        </table>
        <!--end: Datatable-->

      </div>
    </div>
  </div>
</div>`

JS：

var table = $('#allstudent_dt').DataTable({
      "dom": 'tplis',"language": {
        "responsive": true,"lengthMenu": "View _MENU_","info": "_END_ of _TOTAL_","paginate": {
          "next": "Next","previous": "Prev"
        }
      },"initComplete": function() {
        $("#student_page_nitionsd").append($("#allstudent_dt_wrapper .dataTables_paginate"));
        $("#student_page_viewd").append($("#allstudent_dt_wrapper .dataTables_length"));
        $("#student_page_info").append($("#allstudent_dt_wrapper .dataTables_info"));
      },"columns": [{
          "data": "id"
        },{
          "orderable": false,"data": null,"defaultContent": '+'
        },{
          "data": "name"
        },{
          "data": "status"
        },{
          "data": "grandex"
        },{
          "data": "fundlevel"
        },{
          "data": "dateadded"
        },{
          "data": "lastcontact"
        },{
          "data": "info"
        }
      ],"order": [
        [1,'asc']
      ],});

    $('#allstudent_dt tbody').on('click',function() {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if ($(this).attr('data-click-state') == 1) {

        $(this).attr('data-click-state',0);
        $(this).css({
          'background-repeat': 'no-repeat','background-attachment': 'center','background-position': 'center'
        })
      } else {
        $(this).attr('data-click-state',1);
        $(this).css({
          'background-repeat': 'no-repeat','background-position': 'center'
        })

      }

    });

如何防止双行计数？

解决方法

我真的建议您将数据存储在JSON对象中（也可以使用jQuery DataTable Ajax功能获取数据），而不是将其存储在HTML表中。

看我的例子：

var jsonData = [
    {
       "id": "1","name": "John Doe","status": "Active","grandex": "12/01/2020","fundlevel": "100%","dateadded": "Oct 27,2020","lastcontact": "Dec 31,"info": {
           "amount_paid": "$ 1,500.00","credits_paid": "21 / 109","expiration": "June 2024","email": "[e-mail]","phone_number": "[phone]","college": "Community College",}
    },{
       "id": "2","name": "William Santiago",}
    }
];

var table = $('#allstudent_dt').DataTable({
  "dom": 'tplis',"language": {
    "responsive": true,"lengthMenu": "View _MENU_","info": "_END_ of _TOTAL_","paginate": {
      "next": "Next","previous": "Prev"
    }
  },"data": jsonData,"initComplete": function() {
    $("#student_page_nitionsd").append($("#allstudent_dt_wrapper .dataTables_paginate"));
    $("#student_page_viewd").append($("#allstudent_dt_wrapper .dataTables_length"));
    $("#student_page_info").append($("#allstudent_dt_wrapper .dataTables_info"));
  },"columns": [
     { 
        "data": "id","orderable": false,"render": function() {
           var html = '<label class="checkbox checkbox-single">' +
                  '<input type="checkbox" value="" class="group-checkable">' +
                  '<span></span></label>';
                  
           return html;
        }
     },{
        "className": 'details-control',"data": null,"defaultContent": ''
     },{ "data": "name" },{ "data": "status" },{ "data": "grandex" },{ "data": "fundlevel" },{ "data": "dateadded" },{ "data": "lastcontact" }
  ],"order": [
    [2,'asc']
  ],});

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr class="set_format_clool">'+
            '<td>Amount Paid:</td>'+
            '<td>' + d.info.amount_paid + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Credits Paid:</td>'+
            '<td>' + d.info.credits_paid + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Expiration:</td>'+
            '<td>' + d.info.expiration + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Email:</td>'+
            '<td>' + d.info.email + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Phone Number:</td>'+
            '<td>' + d.info.phone_number + '</td>' +
        '</tr>' +
        '<tr class="set_format_clool">'+
            '<td>Colleger:</td>'+
            '<td>' + d.info.college + '</td>' +
        '</tr>' +
    '</table>';
}

// Add event listener for opening and closing details
$('#allstudent_dt tbody').on('click','td.details-control',function () {
   var tr = $(this).closest('tr');
   var row = table.row( tr );

   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
  }
  else {
     // Open this row
     row.child( format(row.data()) ).show();
     tr.addClass('shown');
  }
});

/*$('#allstudent_dt tbody').on('click',function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);

  if ($(this).attr('data-click-state') == 1) {

    $(this).attr('data-click-state',0);
    $(this).css({
      'background-repeat': 'no-repeat','background-attachment': 'center','background-position': 'center'
    })
  } else {
    $(this).attr('data-click-state',1);
    $(this).css({
      'background-repeat': 'no-repeat','background-position': 'center'
    })
  }
});*/

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<div class="tab-content mt-5" id="myTabContent">
  <div class="tab-pane fade show active" id="kt_tab_pane_all" role="tabpanel" aria-labelledby="kt_tab_pane_all">
    <div class="Inner_kt_tableR">
      <div class="Inner_kt_tableR_top">
        <div class="row">
          <div class="col-sm-6">
            <div class="Inner_kt_tableR_top_inner">
              <a href="javascript:void(0);" data-toggle="modal" data-target="#addstaffModal" class="form_brntnxd minwdth mrbtmklright">Add</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Archive</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth archiv mrbtmklright borbtn">Export</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn mrbtmklright">Import</a>
              <a href="javascript:void(0);" class="form_brntnxd minwdth borbtn" data-toggle="modal" data-target="#addfilterfModal">Filters • 3</a>
              <div class="f_p_searchk"><input type="text" class="form-control" placeholder="Search"><i class="fas fa-search"></i></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="cool_page_nitionsd_main">
              <div class="cool_page_info" id="student_page_info"></div>
              <div class="cool_page_nitionsd" id="student_page_nitionsd"></div>
              <div class="cool_page_viewd" id="student_page_viewd"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="dt_kdtable forcheckqbox">
        <!--begin: Datatable-->
        <table id="allstudent_dt" class="table display table-checkable setclose" style="border-collapse:collapse;">
          <thead>
            <tr>
              <th class="dt-left" rowspan="1" colspan="1" style="width: 30px;">
                <label class="checkbox checkbox-single">
                  <input type="checkbox" value="" class="group-checkable">
                  <span></span>
                </label>
              </th>
              <th></th>
              <th>Name</th>
              <th>Status</th>
              <th>Exp.</th>
              <th>Level</th>
              <th>Date Added</th>
              <th>Last Contact</th>
            </tr>
          </thead>
        </table>
        <!--end: Datatable-->

      </div>
    </div>
  </div>
</div>`

快乐编码！