MediaWiki:Gadget-ResearchNotes-datatable.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/**
* Datatables definitions
* @example <>
*/
if( $('link[href$="datatables.min.css"]').length ){
// do nothing
} else {
$('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: 'https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.css'
}).appendTo('head');
}
$.ajaxSetup({ cache: true });
$.when(
mw.loader.getScript( 'https://cdn.datatables.net/v/dt/dt-2.0.8/b-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.js' )
)
.then(
function () {
if( $('#research-notes').length ) {
var table = $('#research-notes').DataTable({
dom: '<"top"lf>rt<"bottom"ip><"clear">',
columns: [
{ "title": "Page" },
{ "title": "File" },
{ "title": "URL" },
{ "title": "Topic" },
{ "title": "Note" },
{ "title": "User" },
{ "title": "Date" }
],
columnDefs: [
{
type: 'date',
targets: [ 6 ]
}
],
aaSorting: [
[ 1, "desc" ]
],
pageLength: 100,
lengthMenu: [
[50, 100, 250, -1],
['50 per page', '100 per page', '250 per page', 'Show all']
],
language: {
searchPlaceholder: 'Search in notes',
searchBuilder: {
title: ''
},
lengthMenu: '_MENU_',
},
initComplete: function () {
$('input:checkbox').on('click', function () {
var searchMode = localStorage.getItem('searchMode') || 'AND';
// Set the dropdown value based on localStorage
document.getElementById('search-mode').value = searchMode;
// Remove previous custom search functions
$.fn.dataTable.ext.search = $.fn.dataTable.ext.search.filter(function(filter) {
return filter.name !== 'customSearch';
});
if (searchMode === 'AND') {
var topics = $('input:checkbox[name="topic"]:checked').map(function() {
return '' + this.value.replace('+', '.') + '';
}).get().join(',');
table.column(3).search(topics, true, false, false).draw(false);
} else if (searchMode === 'OR') {
var topics = $('input:checkbox[name="topic"]:checked').map(function() {
return '' + this.value.replace('+', '.') + '';
}).get().join('|');
table.column(3).search(topics, true, false, false).draw(false);
}
updateFilters();
// table.draw();
});
// Event listener for toggler change
document.getElementById('search-mode').addEventListener('change', function() {
localStorage.setItem('searchMode', this.value);
updateFilters();
});
$('.clear-filter').click(function(){
var filter = false;
$(this).closest('.topics-filter-group').find('input:checkbox:checked').prop('checked', false);
$(this).closest('.topics-filter-group').find('.mw-ui-button').removeClass('shaded');
$(this).hide();
filter = $(this).closest('.topics-filter-group').prop('id');
switch (filter) {
case "topics":
var topics = $('input:checkbox[name="topic"]:checked').map(function() {
return this.value;
}).get().join('|');
//now filter in column 3, with no regex, no smart filtering, not case sensitive
table.column(3).search(topics, true, false, false).draw(false);
$('#current-filters-topics').empty();
break;
}
updateFilters();
});
$('input').click(function(){
var children = $(this).closest('.topics-filter-group').find($('input:checked'));
var close = $(this).closest('.topics-filter-group').find('.clear-filter');
var fbutton = $(this).closest('.topics-filter-group').find('h4');
if ($(children).length) {
close.show();
fbutton.addClass('shaded');
} else {
close.hide();
fbutton.removeClass('shaded');
}
updateFilters();
});
window.table=table;
$('input[name="topic"]').change(function() {
var value = $(this).val(); // Get the value of the checkbox
var isChecked = $(this).prop('checked'); // Check if checkbox is checked
if (isChecked) {
// If checkbox is checked, append its value to the div
$('#current-filters-topics').append('<span>' + value + '</span>');
} else {
// If checkbox is unchecked, remove its value from the div
$('#current-filters-topics').find('span:contains(' + value + ')').remove();
}
});
var input = document.querySelector('[id^="dt-search"]');
input.addEventListener('keyup', function(event) {
updateFilters();
});
function updateFilters() {
var filterData = {
3: { array: [], name: 'topic' }
};
// Build unique arrays for each filter type
for (var key in filterData) {
var column = parseInt(key, 10);
var dataArray = filterData[key].array;
table.columns(column, { search: 'applied' }).data().eq(0).unique().toArray().forEach(function(item) {
dataArray.push.apply(dataArray, item.split(','));
});
dataArray = Array.from(new Set(dataArray)); // Deduplicate array
}
// Filter checkboxes based on available data
for (var key in filterData) {
var dataArray = filterData[key].array;
var filterName = filterData[key].name;
var checkboxes = document.querySelectorAll('input[name="' + filterName + '"]');
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
var value = checkbox.value;
var isAvailable = dataArray.indexOf(value) !== -1;
if (isAvailable) {
checkbox.parentNode.classList.remove('d-none');
checkbox.parentNode.classList.add('d-flex');
} else {
checkbox.parentNode.classList.remove('d-flex');
checkbox.parentNode.classList.add('d-none');
}
}
}
}
}
});
}
});