Я использую CI и Datatables для отображения данных.Эта таблица содержит текст, ссылки и некоторые параметры раскрывающегося списка в столбце.
Я хочу реализовать фильтрацию столбцов, но настраиваемую для каждого столбца.
Некоторые из них, такие как ссылки, мульти-текст и т. Д. Я смог сделать.
Я не могу сделать это для раскрывающегося списка внутри столбцов.
Рис. 1 -> Столбец, над которым я хочу работать.Изображение является частью всей таблицы.
Столбец имеет три значения: «Высокий», «Средний», «Низкий».
Я хочу раскрывающийся список фильтров над столбцом таблицы, а также динамически генерируемыйиз приведенных ниже столбцов, как и в будущем, я бы тоже хотел изменить эту опцию.
На данный момент мне удалось добиться только этого - Рис 2 -> Частично достигнутый результат.
Вот код -
(отметьте соответствующую строку в комментариях)
<script>
$(document).ready(function() {
$('#example').DataTable( {
autowidth : false,
initComplete: function () {
var column_count = 0;
this.api().columns().every( function () {
column_count++;
console.log(column_count);
var column = this;
var select = $('<select style="width:100%;"><option value="">All</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 ) {
if(column_count == 1)
{
var val = $('<div/>').html(d).text();
select.append( '<option value="' + val + '">' + val + '</option>' );
}
else if(column_count == 2 || column_count == 3 ||column_count == 4 )
{
select.append( '<option value="'+d+'">'+d+'</option>' );
}
else if( column_count == 5 )
{
//concerned code snippet. This is fifth column and it needs to show just 3 options but it shows as above image.
var html = d;
var div = document.createElement("div");
div.innerHTML = html;
var text = div.innerText;
console.log(text);
text = text.replace(/(?:\r\n|\r|\n)/g,",");
//text = text.replace(/" .*"/,",");
text = text.split(",").map(function(item) {
return item.trim();
});
text = text.filter(function (el) {
return el != "";
});
console.log(text);
select.append( '<option value="'+text+'">'+text+'</option>' );
}
else {
}
} );
} );
}
} );
} );
</script>