Question

我的数据表的每一列中都有复选框，如果复选框选中它，则对列进行排序。我想在选中复选框时停止排序。

在上图中，如果我选中复选框，它将对数据进行排序

查看：

<section class="content">
<div class="row">
<div class="table-responsive">
<table id="loading_sheet_table" class="table table-bordered  table-sm" style=" overflow: auto;">
</table>
</div>
</div>
</section>
<script>
$.ajax({
url :"<?php echo base_url(); ?>booking/report/loading_sheet/LoadingSheetController/loadingSheet",
type: 'POST',               
data: {
ac_type:ac_type,
},
dataType: "html",
success: function(data){
$('#loading_sheet_table').html(data);
},async:false,
error:function(data){
console.log('error occured during featch');
}
});

$(document).ready(function() {
$('#loading_sheet_table').DataTable({
"paging": false,  
dom: 'Bfrtip',
buttons: [{ 
            extend: 'excel', text: 'export to excel &nbsp; <i class="fa fa-file-excel-o" aria-hidden="true"></i>'
        }
]
});
});  
function printContent(e1) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:not(:checked').each(function() {
allVals.push($(this).val());
});
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css({
 display:'none'
});
});
});
}

控制器：

$this->load->model('booking/report/LoadingSheetModel','sendValues');
  $modResult = $this->sendValues->receivingSheetOfAll();       
  ?>
 <form role="form" id="bilties" name="bilties" method="post">
  <div class="row">
  <div class="table-responsive">

<table id="loading_sheet_table"  class="table table-bordered  table-sm" style=" overflow: auto;">
    <thead>
      <tr>
        <th class="col2"><input    type="checkbox" name="selectedrecord" class="checkbox" value="2"><br>Bilty Id</th>
        <th class="col3"><input    type="checkbox" name="selectedrecord" class="checkbox" value="3"><br>LR No</th>
      </tr>
    </thead>
    <tbody>
    <?php foreach($modResult as $bilty):?>
      <tr>
         <td><?php echo $bilty->id;?></td>
         <td><?php echo $bilty->lr_no;?></td>
      </tr>
    <?php endforeach; ?>              
    </tbody> 
</table>
  </div>
 </div>
</form>

我的控制器中有桌子。我想如果选择排序箭头，则仅选择数据排序，否则仅选择复选框。

Answer 1

尝试使用event.stopImmediatePropagation()来防止事件使DOM树冒泡

$('[name="selectedrecord"]').on('click', function(e) {
  e.stopImmediatePropagation();
});

$('#example').DataTable();

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th><input type="checkbox" name="selectedrecord"/>First name</th>
      <th><input type="checkbox" name="selectedrecord"/>Last name</th>
      <th><input type="checkbox" name="selectedrecord"/>Position</th>
      <th><input type="checkbox" name="selectedrecord"/>Office</th>
      <th><input type="checkbox" name="selectedrecord"/>Age</th>
      <th><input type="checkbox" name="selectedrecord"/>Start date</th>
      <th><input type="checkbox" name="selectedrecord"/>Salary</th>
      <th><input type="checkbox" name="selectedrecord"/>Extn.</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tiger</td>
      <td>Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
      <td>5421</td>
    </tr>
    <tr>
      <td>Garrett</td>
      <td>Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
      <td>8422</td>
    </tr>
    <tr>
      <td>Ashton</td>
      <td>Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
      <td>1562</td>
    </tr>
    <tr>
      <td>Cedric</td>
      <td>Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
      <td>6224</td>
    </tr>
    <tr>
      <td>Airi</td>
      <td>Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
      <td>5407</td>
    </tr>
    <tr>
      <td>Brielle</td>
      <td>Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
      <td>4804</td>
    </tr>
  </tbody>
</table>

我在数据表的每一列中都有一个复选框，我想在选中复选框时停止排序

1 个答案: