我有以下代码,将数据加载到数据表中,并通过选择添加了一些过滤器,但是当我创建新的数据表时,该选择在数据表的头部相乘
我已经尝试过使用destroy函数,但是仍然没有结果在头部增加
$("#button_id").click(function(){
var dataSet = [
[ Math.random().toString(36).substring(7), Math.random().toString(36).substring(7), Math.random().toString(36).substring(3), Math.random(), "2011/04/25", "$320,800" ],
[ Math.random().toString(36).substring(7), Math.random().toString(36).substring(7), Math.random().toString(36).substring(3), Math.random(), "2011/07/25", "$170,800" ]];
if ($.fn.dataTable.isDataTable('#dt_detalle'))
{
var tables = $('.dataTable').DataTable();
var table = tables.table('#dt_detalle');
table.destroy();
// alert('xx')
}
var op = $("#Txt_OP").val();
let tabla = $("#dt_detalle").DataTable({
"destroy": true,
initComplete: function() {
this.api().columns(".searchable_option").every( function () {
var column = this;
var select = $('<br><select class="browser-default" style="width:100%"><option value=""></option></select>')
.appendTo($(column.header()))
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
},
"order": [
[1, "asc"]
],
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." }
],
"select": {
"style": 'os',
"items": 'cell'
}
});
function actualizar() {
/* Calculamos la suma mediante una función de reducción */
let suma = tabla.cells( { selected: true } )
.data()
.reduce(function (a, b) {
let x = parseFloat(a) || 0;
let y = parseFloat(b) || 0;
return x + y;
}, 0
);
/* Asignamos al campo del formulario el resultado obtenido */
$('input[name="autosum"]').val(suma);
}
tabla
.on( 'select', actualizar )
.on( 'deselect', actualizar );
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="col-md-3">
<button type="button" id="button_id" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="fa fa-list"></i> look details
</button>
</div>
<!-- Modal: modalCart -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-fluid" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">tittle</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text md-addon" id="inputGroupMaterial-sizing-sm">Suma</span>
</div>
<input type="text" class="form-control" value="" name="autosum" readonly>
</div>
<table id="dt_detalle" class="table table-hover table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th class="searchable_option">area</th>
<th>x</th>
<th class="searchable_option">number</th>
<th>x</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我希望我对我的解释很好。问候