MediaWiki:Gadget-datatables.js
From Eli's Software Encyclopedia
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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* Creating a datatable
* @example <>
*/
var selectors = [
'table.publisherTitles'
];
var found = false;
for (var i = 0; i < selectors.length; i++) {
if (document.querySelector(selectors[i])) {
found = true;
break;
}
}
if (found) {
var dtsource =
'https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.6/b-3.2.6/b-html5-3.2.6/b-print-3.2.6/cr-2.1.2/cc-1.2.0/date-1.6.3/fc-5.0.5/fh-4.0.5/r-3.0.7/sc-2.4.3/sb-1.8.4/sp-2.3.5/sl-3.1.3/sr-1.4.3/datatables.min.css';
if (!document.querySelector('link[href*="datatables.min.css"]')) {
$('<link/>', {
rel: 'stylesheet',
href: dtsource
}).appendTo('head');
}
$.when(
mw.loader.getScript(
'https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.6/b-3.2.6/b-html5-3.2.6/b-print-3.2.6/cr-2.1.2/cc-1.2.0/date-1.6.3/fc-5.0.5/fh-4.0.5/r-3.0.7/sc-2.4.3/sb-1.8.4/sp-2.3.5/sl-3.1.3/sr-1.4.3/datatables.min.js'
)
).then(
function () {
window.datatablesLoaded = true;
initDataTable();
},
function (e) {
// A script failed to load
mw.log.error(e.message); // => "Failed to load script"
}
);
}
function initDataTable() {
if ($('table.publisherTitles').length) {
new DataTable('.publisherTitles', {
pageLength: 25,
responsive: true,
layout: {
topStart: null,
topEnd: null,
bottomStart: null,
bottomEnd: null,
top2: {
searchPanes: {
cascadePanes: true,
initCollapsed: true,
columns: [0, 1, 2, 4, 6, 7, 8, 9, 10]
},
},
top1: {
search: {
className: "mx-0 w-100"
},
},
bottom1: {
info: {
},
},
bottom2: {
paging: {
},
},
},
columns: [
{ title: 'Title' },
{
title: 'Release',
render: {
display: function (data, type, row) {
return data;
},
sp: function (data, type, row) {
// Split into individual filters for SearchPanes
return data
? data.split(',').map(v => v.trim())
: [];
}
},
searchPanes: {
orthogonal: 'sp'
},
},
{ title: 'Year' },
{
title: 'Publisher', // visible
render: {
display: function (data, type, row) {
if (!data) return '';
return data
.split(/;|\r?\n/)
.map(v => v.trim())
.filter(Boolean)
.map(v => `<div>${v}</div>`)
.join('');
},
},
},
{
title: 'Publisher', // filter
visible: false,
searchable: false,
render: {
sp: function (data, type, row) {
// Split into individual filters for SearchPanes
return data
? data.split(';').map(v => v.trim())
: [];
}
},
searchPanes: {
orthogonal: 'sp'
},
},
{
title: 'Developer', // visible
render: {
display: function (data, type, row) {
if (!data) return '';
return data
.split(/;|\r?\n/)
.map(v => v.trim())
.filter(Boolean)
.map(v => `<div>${v}</div>`)
.join('');
},
},
},
{
title: 'Developer', // filter
visible: false,
searchable: false,
render: {
sp: function (data, type, row) {
// Split into individual filters for SearchPanes
return data
? data.split(';').map(v => v.trim())
: [];
}
},
searchPanes: {
orthogonal: 'sp'
},
},
{
title: 'Media',
render: {
display: function (data, type, row) {
if (!data) return '';
return data
.split(/;|\r?\n/)
.map(v => v.trim())
.filter(Boolean)
.map(v => `<div class="text-nowrap">${v}</div>`)
.join('');
},
sp: function (data, type, row) {
// Split into individual filters for SearchPanes
return data
? data.split(';').map(v => v.trim())
: [];
}
},
searchPanes: {
orthogonal: 'sp'
},
},
{ title: 'Platform' },
{
title: 'Genre',
visible: false,
searchable: true,
render: {
sp: function (data, type, row) {
// Split into individual filters for SearchPanes
return data
? data.split(';').map(v => v.trim())
: [];
}
},
searchPanes: {
orthogonal: 'sp'
},
},
{ title: 'Packaging' }
],
columnDefs: [
{ className: 'text-nowrap', targets: [ 1, 5, 6] }
],
initComplete: function () {
this.api().searchPanes.rebuildPane();
},
});
}
}
