var TableAdvanced = function () { var initTable1 = function () { var table = $('#sample_1'); /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */ /* Set tabletools buttons and button container */ $.extend(true, $.fn.DataTable.TableTools.classes, { "container": "btn-group tabletools-dropdown-on-portlet", "buttons": { "normal": "btn btn-sm default", "disabled": "btn btn-sm default disabled" }, "collection": { "container": "DTTT_dropdown dropdown-menu tabletools-dropdown-menu" } }); var oTable = table.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" }, // Or you can use remote translation file //"language": { // url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json' //}, "order": [ [0, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 10, "dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). // So when dropdowns used the scrollable div should be removed. //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", "tableTools": { "sSwfPath": "../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf", "aButtons": [{ "sExtends": "pdf", "sButtonText": "PDF" }, { "sExtends": "csv", "sButtonText": "CSV" }, { "sExtends": "xls", "sButtonText": "Excel" }, { "sExtends": "print", "sButtonText": "Print", "sInfo": 'Please press "CTR+P" to print or "ESC" to quit', "sMessage": "Generated by DataTables" }] } }); var tableWrapper = $('#sample_1_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown } var initTable2 = function () { var table = $('#sample_2'); /* Table tools samples: https://www.datatables.net/release-datatables/extras/TableTools/ */ /* Set tabletools buttons and button container */ $.extend(true, $.fn.DataTable.TableTools.classes, { "container": "btn-group tabletools-btn-group pull-right", "buttons": { "normal": "btn btn-sm default", "disabled": "btn btn-sm default disabled" } }); var oTable = table.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" }, "order": [ [0, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 10, "dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // horizobtal scrollable datatable // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js). // So when dropdowns used the scrollable div should be removed. //"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", "tableTools": { "sSwfPath": "../../assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf", "aButtons": [{ "sExtends": "pdf", "sButtonText": "PDF" }, { "sExtends": "csv", "sButtonText": "CSV" }, { "sExtends": "xls", "sButtonText": "Excel" }, { "sExtends": "print", "sButtonText": "Print", "sInfo": 'Please press "CTRL+P" to print or "ESC" to quit', "sMessage": "Generated by DataTables" }, { "sExtends": "copy", "sButtonText": "Copy" }] } }); var tableWrapper = $('#sample_2_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown } var initTable3 = function () { var table = $('#sample_3'); /* Formatting function for row details */ function fnFormatDetails(oTable, nTr) { var aData = oTable.fnGetData(nTr); var sOut = ''; sOut += ''; sOut += ''; sOut += ''; sOut += ''; sOut += '
Platform(s):' + aData[2] + '
Engine version:' + aData[3] + '
CSS grade:' + aData[4] + '
Others:Could provide a link here
'; return sOut; } /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement('th'); nCloneTh.className = "table-checkbox"; var nCloneTd = document.createElement('td'); nCloneTd.innerHTML = ''; table.find('thead tr').each(function () { this.insertBefore(nCloneTh, this.childNodes[0]); }); table.find('tbody tr').each(function () { this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); }); /* * Initialize DataTables, with no sorting on the 'details' column */ var oTable = table.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" }, "columnDefs": [{ "orderable": false, "targets": [0] }], "order": [ [1, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 10, }); var tableWrapper = $('#sample_3_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown /* Add event listener for opening and closing details * Note that the indicator for showing which row is open is not controlled by DataTables, * rather it is done here */ table.on('click', ' tbody td .row-details', function () { var nTr = $(this).parents('tr')[0]; if (oTable.fnIsOpen(nTr)) { /* This row is already open - close it */ $(this).addClass("row-details-close").removeClass("row-details-open"); oTable.fnClose(nTr); } else { /* Open this row */ $(this).addClass("row-details-open").removeClass("row-details-close"); oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); } }); } var initTable4 = function () { var table = $('#sample_4'); /* Formatting function for row expanded details */ function fnFormatDetails(oTable, nTr) { var aData = oTable.fnGetData(nTr); var sOut = ''; sOut += ''; sOut += ''; sOut += ''; sOut += ''; sOut += '
Platform(s):' + aData[2] + '
Engine version:' + aData[3] + '
CSS grade:' + aData[4] + '
Others:Could provide a link here
'; return sOut; } /* * Insert a 'details' column to the table */ var nCloneTh = document.createElement('th'); nCloneTh.className = "table-checkbox"; var nCloneTd = document.createElement('td'); nCloneTd.innerHTML = ''; table.find('thead tr').each(function () { this.insertBefore(nCloneTh, this.childNodes[0]); }); table.find('tbody tr').each(function () { this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]); }); var oTable = table.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" }, "columnDefs": [{ "orderable": false, "targets": [0] }], "order": [ [1, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], // set the initial value "pageLength": 10, }); var tableWrapper = $('#sample_4_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper var tableColumnToggler = $('#sample_4_column_toggler'); /* modify datatable control inputs */ tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown /* Add event listener for opening and closing details * Note that the indicator for showing which row is open is not controlled by DataTables, * rather it is done here */ table.on('click', ' tbody td .row-details', function () { var nTr = $(this).parents('tr')[0]; if (oTable.fnIsOpen(nTr)) { /* This row is already open - close it */ $(this).addClass("row-details-close").removeClass("row-details-open"); oTable.fnClose(nTr); } else { /* Open this row */ $(this).addClass("row-details-open").removeClass("row-details-close"); oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details'); } }); /* handle show/hide columns*/ $('input[type="checkbox"]', tableColumnToggler).change(function () { /* Get the DataTables object again - this is not a recreation, just a get of the object */ var iCol = parseInt($(this).attr("data-column")); var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; oTable.fnSetColumnVis(iCol, (bVis ? false : true)); }); } var initTable5 = function () { var table = $('#sample_5'); /* Fixed header extension: http://datatables.net/extensions/scroller/ */ var oTable = table.dataTable({ "dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>", // datatable layout without horizobtal scroll "scrollY": "300", "deferRender": true, "order": [ [0, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], "pageLength": 10 // set the initial value }); var tableWrapper = $('#sample_5_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown } var initTable6 = function () { var table = $('#sample_6'); /* Fixed header extension: http://datatables.net/extensions/keytable/ */ var oTable = table.dataTable({ // Internationalisation. For more info refer to http://datatables.net/manual/i18n "language": { "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" }, "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "No entries found", "infoFiltered": "(filtered1 from _MAX_ total entries)", "lengthMenu": "Show _MENU_ entries", "search": "Search:", "zeroRecords": "No matching records found" }, "order": [ [0, 'asc'] ], "lengthMenu": [ [5, 15, 20, -1], [5, 15, 20, "All"] // change per page values here ], "pageLength": 10, // set the initial value, "columnDefs": [{ // set default column settings 'orderable': false, 'targets': [0] }, { "searchable": false, "targets": [0] }], "order": [ [1, "asc"] ] }); var oTableColReorder = new $.fn.dataTable.ColReorder( oTable ); var tableWrapper = $('#sample_6_wrapper'); // datatable creates the table wrapper by adding with id {your_table_jd}_wrapper tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown } return { //main function to initiate the module init: function () { if (!jQuery().dataTable) { return; } console.log('me 1'); initTable1(); initTable2(); initTable3(); initTable4(); initTable5(); initTable6(); console.log('me 2'); } }; }();