Hi Rabin,
From within an extension you should add ext.datatables as a dependency to your ResourceLoader module (if you have one.) If you don't I suggest defining a new ResourceLoader module that will contain some JavaScript/CSS for your extension. It might look like this:
$wgResourceModules['ext.myExtension'] = array(
'scripts' => 'js/ext.myExtension.js',
'styles' => 'css/ext.myExtension.css',
'messages' => array( 'myextension-hello-world', 'myextension-goodbye-world' ),
'dependencies' => array( 'jquery.ui.datepicker', 'ext.datatables' ),
'localBasePath' => __DIR__,
'remoteExtPath' => 'MyExtension'
);
Once this is done, you can use the DataTables.net jQuery library as normal. In your JavaScript code, you can
$(document).ready(function() {
// Add the default datatables markup
$( '#example' ).dataTable();
// Do more fancy things (like the examples on DataTables.net)
$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false
} );
} );
I strongly suggest reading the DataTables.net documentation on http://datatables.net/.
If you would like to call DataTables from within a page, this is a little more involved. Since MediaWiki does not allow JavaScript within pages (for security reasons among other things,) you might want to look at Extension:Javascript. Calling DataTables from within a page would look something like this:
<javascript>
$(document).ready(function() {
mw.loader.using( 'ext.datatables', function() {
// Now you use datatables like above.
});
});
</javascript>
