MediaWiki:DataTableScript.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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

mw.hook( 'wikipage.content' ).add( ( $content ) => {
	const $target = $content.find( '.datatable' );
	if ( $target.length ) {
        //Load DataTables script
        mw.loader.load('https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.0/b-3.2.3/b-print-3.2.3/date-1.5.5/fh-4.0.1/sb-1.8.2/sp-2.3.3/datatables.css', 'text/css');
        mw.loader.getScript('https://cdn.datatables.net/v/dt/moment-2.29.4/dt-2.3.1/b-3.2.3/b-print-3.2.3/date-1.5.5/fh-4.0.2/sb-1.8.2/sp-2.3.3/sl-3.0.0/datatables.js')
        .then(function() {

            //Construct header and footer elements for wikitable
            var $table = $target;
            var $tableHeader = $('<thead>');
            var $tableFooter = $('<tfoot>');
            $table.prepend($tableHeader);
            $table.find('> tbody > tr').first().appendTo($tableHeader);
            $table.append($tableFooter);
            $table.find('> thead > tr').first().clone().appendTo($tableFooter);
            
            //Construct input element for column search
            $('.datatable tfoot th').each(function () {
      		    var title = $(this).text();
       		    $(this).html('<input type="text" placeholder="Search" />');
   		    });
            
            //Initialise DataTables function
            $table.DataTable({
                initComplete: function () {
                    // Enable column search
                    this.api().columns().every(function () {
                        var that = this;
                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that
                                    .search(this.value)
                                    .draw();
                            }
                        });
                        $('input', this.footer()).on('click', function(e) {
        			        e.stopPropagation();
    			        });
                    });
                }
            });
            
            // Place column search at the top            	
            $table.find('> tfoot > tr').appendTo($tableHeader);
        });
	}
});