mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2024-09-20 15:22:31 +00:00
443 lines
18 KiB
JavaScript
443 lines
18 KiB
JavaScript
|
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 = '<table>';
|
||
|
|
sOut += '<tr><td>Platform(s):</td><td>' + aData[2] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>Engine version:</td><td>' + aData[3] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>CSS grade:</td><td>' + aData[4] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>Others:</td><td>Could provide a link here</td></tr>';
|
||
|
|
sOut += '</table>';
|
||
|
|
|
||
|
|
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 = '<span class="row-details row-details-close"></span>';
|
||
|
|
|
||
|
|
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 = '<table>';
|
||
|
|
sOut += '<tr><td>Platform(s):</td><td>' + aData[2] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>Engine version:</td><td>' + aData[3] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>CSS grade:</td><td>' + aData[4] + '</td></tr>';
|
||
|
|
sOut += '<tr><td>Others:</td><td>Could provide a link here</td></tr>';
|
||
|
|
sOut += '</table>';
|
||
|
|
|
||
|
|
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 = '<span class="row-details row-details-close"></span>';
|
||
|
|
|
||
|
|
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');
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
}();
|