У меня есть таблица данных с 5 фиксированными столбцами, я хочу добавить настраиваемую строку фильтра в разделе thead таблицы. Я могу добавить то же самое идеально, однако из-за фиксированного столбца событие click для jquery multiselect привязывает скрытый элемент и не работает с абсолютным элементом как его клон.
Есть ли как я могу добавить элементы отдельно в раздел thead класса ".DTFC_LeftHeadWrapper" означает, что в абсолютном элементе только не в скрытом после рисования таблицы.
Ниже приведен скриншот моей таблицы данных, я могу нажать на разморозку Фильтр множественного выбора столбцов (помечен как 3), а не в стоп-столбцах (отмечен как 1,2), поскольку событие щелчка по множественному выбору привязано к скрытому элементу.
Вставка моего HTML и js кода ниже -
<section id="text-inputs ">
<div class="container-fluid" style="overflow: scroll;">
<table class=" table table-striped table-bordered td-width" id="summaryTable" style="width:100% !important;">
<thead>
<tr>
<th style="background-color: #8362D6;color: #fff">Month</th>
<th style="background-color: #8362D6;color: #fff">Risk</th>
<th style="background-color: #8362D6;color: #fff">Region</th>
<th style="background-color: #8362D6;color: #fff">Agency Name</th>
<th style="background-color: #8362D6;color: #fff">Agency Code</th>
<th style="background-color: #ED1A69;color: #fff">Account No</th>
<th style="background-color: #ED1A69;color: #fff">POS(in Lakhs)</th>
<th style="background-color: #ED1A69;color: #fff">Res(%)</th>
<th style="background-color: #ED1A69;color: #fff">Monthly Res</th>
<th style="background-color: #ED1A69;color: #fff">National Comparision</th>
<th style="background-color: #ED1A69;color: #fff">Nor+Roll(%)</th>
<th style="background-color: #ED1A69;color: #fff">Monthly Nor+Roll</th>
<th style="background-color: #ED1A69;color: #fff">Qualitative Parameters</th>
<th style="background-color: #ED1A69;color: #fff">Collection (in Lakhs)</th>
<th style="background-color: #366092;color: #fff">No of Collectors</th>
<th style="background-color: #366092;color: #fff">Collection Cost</th>
<th style="background-color: #366092;color: #fff">Settlement Cost</th>
<th style="background-color: #366092;color: #fff">Penal Cost</th>
<th style="background-color: #366092;color: #fff">Total Cost</th>
<th style="background-color: #366092;color: #fff">CPA</th>
<th style="background-color: #366092;color: #fff">COC(%)</th>
<th style="background-color: #366092;color: #fff">Agency Audit</th>
<th style="background-color: #366092;color: #fff">Delay in Desposition</th>
<th style="background-color: #366092;color: #fff">Mobicule</th>
</tr>
</thead>
<tbody id="allData">
</tbody>
</table>
</section>
</div>
</div>
</section>
Добавление фильтрующих элементов
$('#summaryTable thead tr').clone(true).appendTo( '#summaryTable thead' );
$('#summaryTable thead tr:eq(1) th').each( function (i) {
$(this).html( "<select style='z-index:999999;position:absolute' class='form-control dropdown_batch"+i+"' class='dropdown_batch' name='dropdown_batch' id='dropdown_batch"+i+"' data-error='#errTraceBatchno' multiple='multiple'> <option value='oct-19'>may</option><option value='nov-19'>jun</option> <option value='dec-19'>july</option> </select>" );
$(".dropdown_batch"+i).multiselect().multiselectfilter();
} );
Инициализация данных
var summaryTable = $('#summaryTable').DataTable({
'dom':'<<"pull-left"l><"pull-right"f>B>rt<"bottom"ip><"clear">',
"scrollX": true,
"orderCellsTop":true,
"processing": true,
"serverSide": true,
"deferRender": true,
"ordering": true,
"order": [[0,'desc']],
"info": true,
"pageLength": 15,
"lengthMenu": [10, 15, 20, 50, 100, 200, 500,1000],
"ajax": {
"url": "dashboardAllData",
"type": 'POST'
},
buttons: [
{
className: 'btn-sm mt10',
extend: 'excelHtml5',
filename: 'Monthly_Report_'+today_date,
title: '',
createEmptyCell : true,
customize: function ( xlsx ) {
},
text: 'Export Excel',
exportOptions: {
}
}
},
}
],
fixedColumns: {
leftColumns: 5,
},
});
Я хочу использовать код ниже после инициализируемой датой, так что он добавляется только к абсолютному элементу, а не в скрытый элемент в столбце замораживания,
Когда мы замораживаем столбец в datatable, он создает дубликат элемента th Количество заблокированных столбцов и их содержание в классе ".DTFC_LeftHeadWrapper" с абсолютной позицией и исходным содержимым остаются позади, поэтому мое событие click не срабатывает в разделе заголовка заблокированных столбцов, когда я нажимаю на дублированный элемент, и событие связывается с скрытый элемент.
Итак, я излагаю способ добавления фильтрующего элемента в столбцы без фиксации во время / до инициализации данных и в абсолютные столбцы после инициализации объекта данных и его замораживания. - что-то вроде ниже
$('.DTFC_LeftHeadWrapper table thead tr:eq(2) th').each( function (i) {
if(i<5){
$(this).html( "<select style='z-index:999999;position:absolute' class='form-control dropdown_batch"+i+"' class='dropdown_batch' name='dropdown_batch' id='dropdown_batch"+i+"' data-error='#errTraceBatchno' multiple='multiple'> <option value='oct-19'>may</option><option value='nov-19'>jun</option> <option value='dec-19'>july</option> </select>" );
$(".dropdown_batch"+i).multiselect().multiselectfilter();
}
} );