forked from community/device-mgt-core
parent
c8b37207fc
commit
177b7cf3df
@ -0,0 +1,281 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||||
|
* Version 2.0 (the "License"); you may not use this file except
|
||||||
|
* in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* data-tables extended function (Server-side Pagination)
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @namespace $
|
||||||
|
* The $ is just a function.
|
||||||
|
* It is actually an alias for the function called jQuery.
|
||||||
|
* For ex: $(this) means jQuery(this) and S.fn.x means jQuery.fn.x
|
||||||
|
*/
|
||||||
|
|
||||||
|
$.fn.datatables_extended_serverside_paging = function (settings , url, dataFilter,
|
||||||
|
columns, fnCreatedRow, fnDrawCallback) {
|
||||||
|
var elem = $(this);
|
||||||
|
|
||||||
|
// EMM related function
|
||||||
|
if (initiateViewOption) {
|
||||||
|
$(".viewEnabledIcon").bind("click", initiateViewOption);
|
||||||
|
}
|
||||||
|
//--- End of EMM related codes
|
||||||
|
|
||||||
|
$(elem).DataTable(
|
||||||
|
$.extend({},{
|
||||||
|
serverSide: true,
|
||||||
|
bSortCellsTop: true,
|
||||||
|
ajax : {
|
||||||
|
url: "/emm/api/data-tables/invoker",
|
||||||
|
data : function (params) {
|
||||||
|
var filter = "";
|
||||||
|
var i;
|
||||||
|
for (i = 0; i < params.columns.length; i++) {
|
||||||
|
// console.log(i);
|
||||||
|
filter += "&" + params.columns[i].data + "=" + params.columns[i].search.value;
|
||||||
|
}
|
||||||
|
// console.log(filter);
|
||||||
|
params.offset = params.start;
|
||||||
|
params.limit = params.length;
|
||||||
|
params.filter = filter;
|
||||||
|
params.url = url;
|
||||||
|
},
|
||||||
|
dataFilter: dataFilter
|
||||||
|
},
|
||||||
|
columns: columns,
|
||||||
|
responsive: false,
|
||||||
|
autoWidth: false,
|
||||||
|
dom:'<"dataTablesTop"' +
|
||||||
|
'f' +
|
||||||
|
'<"dataTables_toolbar">' +
|
||||||
|
'>' +
|
||||||
|
'rt' +
|
||||||
|
'<"dataTablesBottom"' +
|
||||||
|
'lip' +
|
||||||
|
'>',
|
||||||
|
language: {
|
||||||
|
searchPlaceholder: 'Search by Role name',
|
||||||
|
search: ''
|
||||||
|
},
|
||||||
|
fnCreatedRow: fnCreatedRow,
|
||||||
|
"fnDrawCallback": fnDrawCallback,
|
||||||
|
initComplete: function () {
|
||||||
|
this.api().columns().every(function () {
|
||||||
|
|
||||||
|
var column = this;
|
||||||
|
var filterColumn = $('.filter-row th', elem);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create & add select/text filters to each column
|
||||||
|
*/
|
||||||
|
if (filterColumn.eq(column.index()).hasClass('select-filter')) {
|
||||||
|
var select = $('<select class="form-control"><option value="">All</option></select>')
|
||||||
|
.appendTo(filterColumn.eq(column.index()).empty())
|
||||||
|
.on('change', function () {
|
||||||
|
var val = $.fn.dataTable.util.escapeRegex(
|
||||||
|
$(this).val()
|
||||||
|
);
|
||||||
|
|
||||||
|
column
|
||||||
|
//.search(val ? '^' + val + '$' : '', true, false)
|
||||||
|
.search(val ? val : '', true, false)
|
||||||
|
.draw();
|
||||||
|
|
||||||
|
if (filterColumn.eq(column.index()).hasClass('data-platform')) {
|
||||||
|
if (val == null || val == undefined || val == "") {
|
||||||
|
$("#operation-bar").hide();
|
||||||
|
$("#operation-guide").show();
|
||||||
|
} else {
|
||||||
|
$("#operation-guide").hide();
|
||||||
|
$("#operation-bar").show();
|
||||||
|
loadOperationBar(val);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(column).each(function () {
|
||||||
|
if ($(column.nodes()).attr('data-search')) {
|
||||||
|
var titles = [];
|
||||||
|
column.nodes().unique().sort().each(function (d, j) {
|
||||||
|
var title = $(d).attr('data-display');
|
||||||
|
if ($.inArray(title, titles) < 0) {
|
||||||
|
titles.push(title);
|
||||||
|
if (title !== undefined) {
|
||||||
|
select.append('<option value="' + title + '">' + title + '</option>')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
column.data().unique().sort().each(function (d, j) {
|
||||||
|
select.append('<option value="' + d + '">' + d + '</option>')
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (filterColumn.eq(column.index()).hasClass('text-filter')) {
|
||||||
|
var title = filterColumn.eq(column.index()).attr('data-for');
|
||||||
|
$(filterColumn.eq(column.index()).empty()).html('<input type="text" class="form-control" placeholder="Search ' + title + '" />');
|
||||||
|
|
||||||
|
filterColumn.eq(column.index()).find('input').on('keyup change', function () {
|
||||||
|
column.search($(this).val()).draw();
|
||||||
|
if ($('.dataTables_empty').length > 0) {
|
||||||
|
$('.bulk-action-row').addClass("hidden");
|
||||||
|
} else {
|
||||||
|
$('.bulk-action-row').removeClass("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* search input default styles override
|
||||||
|
*/
|
||||||
|
var search_input = $(this).closest('.dataTables_wrapper').find('div[id$=_filter] input');
|
||||||
|
search_input.before('<i class="fw fw-search search-icon"></i>').removeClass('input-sm');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* create sorting dropdown menu for list table advance operations
|
||||||
|
*/
|
||||||
|
var dropdownmenu = $('<ul class="dropdown-menu arrow arrow-top-right dark sort-list add-margin-top-2x"><li class="dropdown-header">Sort by</li></ul>');
|
||||||
|
$('.sort-row th', elem).each(function () {
|
||||||
|
if (!$(this).hasClass('no-sort')) {
|
||||||
|
dropdownmenu.append('<li><a href="#' + $(this).html() + '" data-column="' + $(this).index() + '">' + $(this).html() + '</a></li>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* append advance operations to list table toolbar
|
||||||
|
*/
|
||||||
|
$('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html('' +
|
||||||
|
'<ul class="nav nav-pills navbar-right remove-margin" role="tablist">' +
|
||||||
|
'<li><button data-click-event="toggle-selectable" class="btn btn-default btn-primary select-enable-btn">Select</li>' +
|
||||||
|
'<li><button data-click-event="toggle-selected" id="dt-select-all" class="btn btn-default btn-primary disabled">Select All</li>' +
|
||||||
|
'<li><button data-click-event="toggle-list-view" data-view="grid" class="btn btn-default"><i class="fw fw-grid"></i></button></li>' +
|
||||||
|
'<li><button data-click-event="toggle-list-view" data-view="list" class="btn btn-default"><i class="fw fw-list"></i></button></li>' +
|
||||||
|
'<li><button class="btn btn-default" data-toggle="dropdown"><i class="fw fw-sort"></i></button>' + dropdownmenu[0].outerHTML + '</li>' +
|
||||||
|
'</ul>'
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* sorting dropdown menu select function
|
||||||
|
*/
|
||||||
|
$('.dataTables_wrapper .sort-list li a').click(function () {
|
||||||
|
$(this).closest('li').siblings('li').find('a').removeClass('sorting_asc').removeClass('sorting_desc');
|
||||||
|
|
||||||
|
var thisTable = $(this).closest('.dataTables_wrapper').find('.dataTable').dataTable();
|
||||||
|
|
||||||
|
if (!($(this).hasClass('sorting_asc')) && !($(this).hasClass('sorting_desc'))) {
|
||||||
|
$(this).addClass('sorting_asc');
|
||||||
|
thisTable.fnSort([[$(this).attr('data-column'), 'asc']]);
|
||||||
|
}
|
||||||
|
else if ($(this).hasClass('sorting_asc')) {
|
||||||
|
$(this).switchClass('sorting_asc', 'sorting_desc');
|
||||||
|
thisTable.fnSort([[$(this).attr('data-column'), 'desc']]);
|
||||||
|
}
|
||||||
|
else if ($(this).hasClass('sorting_desc')) {
|
||||||
|
$(this).switchClass('sorting_desc', 'sorting_asc');
|
||||||
|
thisTable.fnSort([[$(this).attr('data-column'), 'asc']]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var rowSelectedClass = 'DTTT_selected selected';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable/Disable selection on rows
|
||||||
|
*/
|
||||||
|
$('.dataTables_wrapper [data-click-event=toggle-selectable]').click(function () {
|
||||||
|
var button = this,
|
||||||
|
thisTable = $(this).closest('.dataTables_wrapper').find('.dataTable').dataTable();
|
||||||
|
if ($(button).html() == 'Select') {
|
||||||
|
thisTable.addClass("table-selectable");
|
||||||
|
$(button).addClass("active").html('Cancel');
|
||||||
|
$(button).parent().next().children("button").removeClass("disabled");
|
||||||
|
// EMM related code
|
||||||
|
$(".viewEnabledIcon").unbind("click");
|
||||||
|
//--- End of EMM related codes
|
||||||
|
} else if ($(button).html() == 'Cancel') {
|
||||||
|
thisTable.removeClass("table-selectable");
|
||||||
|
$(button).addClass("active").html('Select');
|
||||||
|
$(button).parent().next().children().addClass("disabled");
|
||||||
|
// EMM related function
|
||||||
|
$(".viewEnabledIcon").bind("click", initiateViewOption);
|
||||||
|
//--- End of EMM related codes
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* select/deselect all rows function
|
||||||
|
*/
|
||||||
|
$('.dataTables_wrapper [data-click-event=toggle-selected]').click(function () {
|
||||||
|
var button = this,
|
||||||
|
thisTable = $(this).closest('.dataTables_wrapper').find('.dataTable').dataTable();
|
||||||
|
if (!$(button).hasClass('disabled')) {
|
||||||
|
if ($(button).html() == 'Select All') {
|
||||||
|
thisTable.api().rows().every(function () {
|
||||||
|
$(this.node()).addClass(rowSelectedClass);
|
||||||
|
$(button).html('Deselect All');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if ($(button).html() == 'Deselect All') {
|
||||||
|
thisTable.api().rows().every(function () {
|
||||||
|
$(this.node()).removeClass(rowSelectedClass);
|
||||||
|
$(button).html('Select All');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* on row click select/deselect row function
|
||||||
|
*/
|
||||||
|
$('body').on('click', '[data-type=selectable]', function () {
|
||||||
|
var rowSelectedClass = 'DTTT_selected selected';
|
||||||
|
$(this).toggleClass(rowSelectedClass);
|
||||||
|
var button = this,
|
||||||
|
thisTable = $(this).closest('.dataTables_wrapper').find('.dataTable').dataTable();
|
||||||
|
|
||||||
|
thisTable.api().rows().every(function () {
|
||||||
|
if (!$(this.node()).hasClass(rowSelectedClass)) {
|
||||||
|
$(button).closest('.dataTables_wrapper').find('[data-click-event=toggle-selected]').html('Select All');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* list table list/grid view toggle function
|
||||||
|
*/
|
||||||
|
var toggleButton = $('[data-click-event=toggle-list-view]');
|
||||||
|
toggleButton.click(function () {
|
||||||
|
if ($(this).attr('data-view') == 'grid') {
|
||||||
|
$(this).closest('.dataTables_wrapper').find('.dataTable').addClass('grid-view');
|
||||||
|
//$(this).closest('li').hide();
|
||||||
|
//$(this).closest('li').siblings().show();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$(this).closest('.dataTables_wrapper').find('.dataTable').removeClass('grid-view');
|
||||||
|
//$(this).closest('li').hide();
|
||||||
|
//$(this).closest('li').siblings().show();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},settings)
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in new issue