MediaWiki:Gadget-Synovial-joints-table.js: Difference between revisions
From WikiMSK
(Created page with "→* * For Synovial Joints datatable * @example <>: (function($,mw){ var table = $('#synovial-joints').DataTable({ searchBuilder:{ }, dom: 'Qfrtip',...") |
No edit summary |
||
Line 7: | Line 7: | ||
var table = $('#synovial-joints').DataTable({ | var table = $('#synovial-joints').DataTable({ | ||
orderCellsTop: true, | orderCellsTop: true, | ||
fixedHeader: true, | fixedHeader: true, | ||
columnDefs:[{ | columnDefs:[{ | ||
}], | }], | ||
columns: [ | columns: [ | ||
Line 30: | Line 23: | ||
], | ], | ||
fnInitComplete: function() { | 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'); | |||
} | } | ||
}); | }); | ||
}(jQuery, mediaWiki)); | }(jQuery, mediaWiki)); |
Revision as of 18:22, 1 May 2022
/**
* For Synovial Joints datatable
* @example <>
*/
(function($,mw){
var table = $('#synovial-joints').DataTable({
orderCellsTop: true,
fixedHeader: true,
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');
}
});
}(jQuery, mediaWiki));