From 177b7cf3dfc81ad063477ae228f852943caddfaa Mon Sep 17 00:00:00 2001 From: dilanua Date: Thu, 21 Jul 2016 17:58:59 +0530 Subject: [PATCH] Refactoring data-tables-extended-unit --- .../data-tables-extended.hbs | 3 +- .../dataTables.extended.serversidepaging.js | 281 ++++++++++++++++++ 2 files changed, 283 insertions(+), 1 deletion(-) create mode 100644 components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs index ebe533ca13..0bb33aa8cb 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/data-tables-extended.hbs @@ -19,9 +19,10 @@ {{~css "css/dataTables.bootstrap.css"}} {{~css "css/dataTables.responsive.css"}} {{/zone}} -{{~#zone "bottomJs"}} +{{#zone "bottomJs"}} {{~js "js/jquery.dataTables.min.js"}} {{~js "js/dataTables.bootstrap.js"}} {{~js "js/dataTables.responsive.min.js"}} {{~js "js/dataTables.extended.js"}} + {{~js "js/dataTables.extended.serversidepaging.js"}} {{/zone}} diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js new file mode 100644 index 0000000000..1ac4db312d --- /dev/null +++ b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.data-tables-extended/public/js/dataTables.extended.serversidepaging.js @@ -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 = $('') + .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('') + } + } + }); + } else { + column.data().unique().sort().each(function (d, j) { + select.append('') + }); + } + }); + } else if (filterColumn.eq(column.index()).hasClass('text-filter')) { + var title = filterColumn.eq(column.index()).attr('data-for'); + $(filterColumn.eq(column.index()).empty()).html(''); + + 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('').removeClass('input-sm'); + + /** + * create sorting dropdown menu for list table advance operations + */ + var dropdownmenu = $(''); + $('.sort-row th', elem).each(function () { + if (!$(this).hasClass('no-sort')) { + dropdownmenu.append('
  • ' + $(this).html() + '
    • '); + } + }); + + /** + * append advance operations to list table toolbar + */ + $('.dataTable.list-table').closest('.dataTables_wrapper').find('.dataTablesTop .dataTables_toolbar').html('' + + '' + ); + + /** + * 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) + ); + +};