How to add Datatable into Mediawiki site?

vent

Hi,

I want to use Datatable in my mediawiki site; but I don't know how to make it. I am really appreciated if anyone could give me some document or tutorial.

Thank you so much for your support.

Vor_tex

Hi, how much my knowledge was enough for me:

Added to LocalSettings.php next code:

$wgResourceModules['DataTables'] = array(
    'scripts' => array( '/extensions/DataTables_new/js/jquery.dataTables.min.js', '/extensions/DataTables_new/extensions/FixedHeader/js/dataTables.fixedHeader.min.js', '/extensions/DataTables_new/extensions/Buttons/js/dataTables.buttons.min.js', '/extensions/DataTables/extensions/Buttons/js/buttons.colVis.min.js'),
    'styles' => array( '/extensions/DataTables_new/css/jquery.dataTables.min.css', '/extensions/DataTables_new/extensions/FixedHeader/css/fixedHeader.dataTables.min.css', '/extensions/DataTables_new/extensions/Buttons/css/buttons.dataTables.min.css'),
    // could e.g. add dependencies on core modules here
);
// ...and set up a hook to add it to every page
function addDataTablesScript( &$out ) {
    $out->addModules( 'DataTables' );
    return true;
}
$wgHooks['BeforePageDisplay'][] = 'addDataTablesScript';

Added to mysite.com/wiki/MediaWiki:Common.js:

    $(document).ready(function() {
        $('table.display').DataTable({
            fixedHeader: {
                header: true,
                footer: true
            },
            ordering: false,
            order: [[0,0]],
            lengthMenu: [[10, 25, 50,100, -1], [10, 25, 50,100, 'Все']],
            pageLength: -1,
            language: {
                lengthMenu: 'Показать _MENU_ записи',
                zeroRecords: 'По запросу ничего не найдено - простите',
                info: 'Показано с _PAGE_ по _PAGES_',
                "sInfo": 'Показано с _START_ по _END_ из _TOTAL_ записей',
                infoEmpty: 'Нет доступных записей',
                infoFiltered: '(отфильтованых из _MAX_ записей)',
                search: 'Поиск: _INPUT_',
                paginate: {
                    next: 'Следующая',
                    previous: 'Предыдущая'
                },
                buttons: {
                    colvis: 'Выбрать столбцы',
                    colvisRestore: 'Отобразить все',
                    pageLength: {
                    _: '%d строк',
                    '-1': 'Все строки'
                    }
                }
            },
            //Подключение кнопок
            dom: 'Bfrtip',
            buttons: [
            'pageLength',
               {
                    extend: 'colvis',
                    columns: ':gt(0)',
                    collectionLayout: 'fixed two-column',
                    postfixButtons: [ 'colvisRestore' ],
                }
            ]
        });


        $('table.search').DataTable({
            ordering: false,
            lengthMenu: [[10, 25, 50,100, -1], [10, 25, 50,100, 'Все']],
            pageLength: -1,
            language: {
                lengthMenu: 'Показать _MENU_ записи',
                zeroRecords: 'По запросу ничего не найдено - простите',
                info: 'Показано с _PAGE_ по _PAGES_',
                sInfo: 'Показано с _START_ по _END_ из _TOTAL_ записей',
                infoEmpty: 'Нет доступных записей',
                infoFiltered: '(отфильтованых из _MAX_ записей)',
                search: 'Поиск: _INPUT_',
                paginate: {
                    next: 'Следующая',
                    previous: 'Предыдущая'
                },
                buttons: {
                    pageLength: {
                    _: '%d строк',
                    '-1': 'Все строки'
                    }
                }
            },
            //Подключение кнопок
            dom: 'Bfrtip',
            buttons: [
            'pageLength'
            ]
        });
    });

If it turned out to be implemented more successfully. I will be glad to see

obliv

Thanks @Vor_Tex, it's work for me

But i have a problem to add multiple datatables in Mediawiki...

I use this javascript in Common.js to generate my table, because Mediawiki restricts the use of HTML :

var myElement = document.getElementById('pageid');
myElement.innerHTML = '<table class=\ ....

obliv

I found the solution by enabling html with $wgRawHtml = true;
So i do not need anymore to generate my table from common.js