0
Ich versuche, den Auswahlfilter mit dem mitgelieferten Demo-Code zu implementieren, aber es filtert nicht die Tabelle.Hinzufügen eines Multi-Select auf js Datentabelle
JS CODE
imsi_table = $('#imsi_table').DataTable({
"lengthMenu": [[7,-1],['Per Site','All']],
"iDisplayLength": 7,
"ordering": false,
"bLengthChange": true,
"bInfo": false,
"bFilter": false,
fixedHeader: {
header: true,
footer: true
},
"footerCallback": function (row, data, start, end, display) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over this page
postPayTotal = api
.column(2, { page: 'current'})
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(2).footer()).html(
postPayTotal
);
// Total over this page
prePayTotal = api
.column(3, { page: 'current'})
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(3).footer()).html(
prePayTotal
);
// Total over this page
uknownTotal = api
.column(4, { page: 'current'})
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(4).footer()).html(
uknownTotal
);
},
initComplete: function() {
this.api().columns('.multi-select-filter').every(function() {
var column = this;
console.log(column);
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^'+val+'$' : '', true, false)
.draw();
console.log(val);
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="'+d+'">'+d+'</option>')
});
});
}
}); // datatble end
HTML CODE
<div id="imsi_table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<div class="row">
<div class="col-sm-6">
<div class="dataTables_length" id="imsi_table_length">
<label>Show
<select name="imsi_table_length" aria-controls="imsi_table" class="form-control input-sm">
<option value="7">Per Site</option>
<option value="-1">All</option>
</select>
entries</label></div>
</div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-12">
<table id="imsi_table" class="table table-bordered table-inverse table-hover table-striped table-sm dataTable" role="grid">
<thead class="">
<tr role="row">
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 374px;">Site</th>
<th class="multi-select-filter sorting_disabled" rowspan="1" colspan="1" style="width: 188px;">Service</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 182px;">PostPay</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 161px;">PrePay</th>
<th class="sorting_disabled" rowspan="1" colspan="1" style="width: 179px;">Uknown</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td>1</td>
<td>2G Voice</td>
<td>1839</td>
<td>575</td>
<td>583</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G Voice</td>
<td>12311</td>
<td>563</td>
<td>943</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>2G SMS</td>
<td>618</td>
<td>321</td>
<td>239</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G SMS</td>
<td>2849</td>
<td>400</td>
<td>358</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>2G Data</td>
<td>1765</td>
<td>96</td>
<td>3177</td>
</tr>
<tr role="row" class="even">
<td>1</td>
<td>3G Data</td>
<td>14345</td>
<td>892</td>
<td>2260</td>
</tr>
<tr role="row" class="odd">
<td>1</td>
<td>4G</td>
<td>1390</td>
<td>52</td>
<td>151</td>
</tr>
</tbody>
<tfoot>
<tr>
<th rowspan="1" colspan="1">Total Unique IMSIs</th>
<th rowspan="1" colspan="1">
<select>
<option value=""></option>
<option value="2G Data">2G Data</option>
<option value="2G SMS">2G SMS</option>
<option value="2G Voice">2G Voice</option>
<option value="3G Data">3G Data</option>
<option value="3G SMS">3G SMS</option>
<option value="3G Voice">3G Voice</option>
<option value="4G">4G</option>
</select></th>
<th rowspan="1" colspan="1">35117</th>
<th rowspan="1" colspan="1">2899</th>
<th rowspan="1" colspan="1">7711</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-5"></div>
<div class="col-sm-7">
<div class="dataTables_paginate paging_simple_numbers" id="imsi_table_paginate">
<ul class="pagination">
<li class="paginate_button previous disabled" id="imsi_table_previous"><a href="#" aria-controls="imsi_table" data-dt-idx="0" tabindex="0">Previous</a></li>
<li class="paginate_button active"><a href="#" aria-controls="imsi_table" data-dt-idx="1" tabindex="0">1</a></li>
<li class="paginate_button next disabled" id="imsi_table_next"><a href="#" aria-controls="imsi_table" data-dt-idx="2" tabindex="0">Next</a></li>
</ul>
</div>
</div>
</div>