MediaWiki:Gadget-Synovial-joints-table.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.

/**
 * For Synovial Joints datatable
 * @example <>
 */
 
(function($,mw){
	
if($('#synovial-joints').length > 0){
    	
$('<link/>', {
   rel: 'stylesheet',
   type: 'text/css',
   href: 'https://cdn.datatables.net/v/dt/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.css'
}).appendTo('head');

$.when(
    mw.loader.getScript( 'https://cdn.datatables.net/v/dt/dt-1.11.5/b-2.2.2/b-colvis-2.2.2/b-print-2.2.2/cr-1.5.5/date-1.1.2/fc-4.0.2/fh-3.2.2/kt-2.6.4/r-2.2.9/sc-2.0.5/sb-1.3.2/sp-2.0.0/sl-1.3.4/sr-1.1.0/datatables.min.js' )
)
.then(
    function () {
    var table = $('#synovial-joints').DataTable({
        columnDefs:[{
        }],
       	columns: [
			{ "title": "Synovial Joint" },
			{ "title": "Joint type" },
			{ "title": "Bones" },
			{ "title": "Ligaments" },
			{ "title": "Muscles" },
			{ "title": "Innervation" },
			{ "title": "Vasculature" },
			{ "title": "ROM" },
			{ "title": "Volume" },
		],
		fnInitComplete: function() {    
			$('#synovial-joints thead tr')
        //		.clone(true)
        		.addClass('filters')
        //		.appendTo('#synovial-joints thead');

            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('<input type="text" placeholder="' + title + '" />');
 
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            e.stopPropagation();
 
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
 
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
 
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
                
            $('#synovial-joints thead tr.filters td')
        		.removeClass('sorting sorting_asc sorting_desc');
		}
    });
    },
    function ( e ) {
        // A script failed, and is not available
        mw.log.error( e.message ); // => "Failed to load script"
    });
}
}(jQuery, mediaWiki));