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 ]
					},
					{
						visible: false,
						searchable: true,
						sortable: false,
						targets: [ 3 ]
					},
				],
				aaSorting: [
					[ 1, "desc" ]
				],
				pageLength: 100,
				lengthMenu: [
					[50, 100, 250, -1],
					['50 per page', '100 per page', '250 per page', 'Show all']
				],
    			language: {
    				search: '',
    				searchPlaceholder: 'Search in notes',
					searchBuilder: {
    					title: ''
					},
				lengthMenu: '_MENU_',
			},
			initComplete: function () {

				function applyFilters(){
					//build a regex filter string with an or(|) condition
                    var topic = $('input:checkbox[name="topic"]:checked').map(function() {
						return this.value;
					}).get().join('|');

					//filter in column 3, with an regex, no smart filtering, not case sensitive
					table.column(3).search(topic, true, false, false).draw(false);
					
					var monitor = $('#monitor');
					$(monitor).html(topic);
				}
				
				// OR filtering
				$('input:checkbox').on('click', function () {
					applyFilters();
				});
				
				// Clear filters
				$('.clear-filter').click(function(){
					$('#topics').find('input:checkbox:checked').prop('checked', false);
					applyFilters();
				});
			}
		});
	}		
});