diff --git a/README.md b/README.md index 8baf5fe..30c62b2 100644 --- a/README.md +++ b/README.md @@ -26,9 +26,10 @@ Direct download: get ZIP archive [from here](https://github.com/angular-data-gri Then use files from *dist* folder (see below). ### Setup -1. Include scripts in you application: `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination). +1. Include scripts in you application: `angular.min.js`, `dataGrid.min.js` and `pagination.min.js` (include the second one only if you need pagination). ```javascript + ``` @@ -105,7 +106,10 @@ Use this object for calling methods of directive: `sort()`, `filter()`, `refresh }; ``` - - For server side pagination/filtering to fetch data by page: assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: + - For server side pagination/filtering to fetch data by page: + 1. add attribute 'server-pagination'=true on element on which you applied directive 'grid-data' + 2. assign ```getData``` method to some function with URL params as 1st parameter and data itself as 2d parameter: + ```javascript $scope.gridOptions = { @@ -145,7 +149,7 @@ $scope.gridOptions = { ### Pagination -You can optionally use `pagination` directive to display paging with previous/next and first/last controls. +You can optionally use `grid-pagination` directive to display paging with previous/next and first/last controls. Directive is built on a base of excellent [Angular UI](https://angular-ui.github.io/bootstrap/) component and shares extensive API: ```HTML diff --git a/demo/bootstrap/index.html b/demo/bootstrap/index.html index c2cf1d0..90b9860 100644 --- a/demo/bootstrap/index.html +++ b/demo/bootstrap/index.html @@ -42,6 +42,9 @@

Additional Demos

  • Multiple grids on page
    • +
  • + Server pagination +
    • diff --git a/demo/bootstrap/js/serverPaginationApp.js b/demo/bootstrap/js/serverPaginationApp.js new file mode 100644 index 0000000..dc46500 --- /dev/null +++ b/demo/bootstrap/js/serverPaginationApp.js @@ -0,0 +1,46 @@ +(function () { + 'use strict'; + + angular + .module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination']) + .controller('myAppController', MyAppController) + .factory('myAppFactory', MyAppFactory); + + MyAppController.$inject = ['$scope', 'myAppFactory']; + MyAppFactory.$inject = ['$http']; + + function MyAppController($scope, myAppFactory) { + + $scope.gridOptions = { + data: [], + getData: myAppFactory.getOrdersData, + sort: { + predicate: 'orderNo', + direction: 'asc' + } + }; + $scope.UI = {}; + $scope.gridActions = {}; + myAppFactory.getStatuses().success(function (resp) { + $scope.UI.statusOptions = resp; + }); + } + + function MyAppFactory($http) { + var herokuDomain = 'https://server-pagination.herokuapp.com'; + return { + getOrdersData: getOrdersData, + getStatuses: getStatuses + }; + + function getOrdersData(params, callback) { + $http.get(herokuDomain + '/orders' + params).success(function (response) { + callback(response.orders, response.ordersCount); + }); + } + + function getStatuses() { + return $http.get(herokuDomain + '/orders/statuses'); + } + } +})(); diff --git a/demo/bootstrap/server-pagination.html b/demo/bootstrap/server-pagination.html new file mode 100644 index 0000000..f9b25a8 --- /dev/null +++ b/demo/bootstrap/server-pagination.html @@ -0,0 +1,222 @@ + + + + + + + + + + + + + +
    +
    +

    Angular Data Grid Server Pagination

    + Features enabled: sorting, filtering (using both in-grid and external controls), pagination and items-per-page functionality. + Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling. + Project GitHub +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + +
    + + + + +
    +
    +
    +
    +
    + + +
    + + + + +
    +
    +
    + Clear Dates +
    +
    +
    +
    + + +
    +
    +
    {{paginationOptions.totalItems}} items total
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + +
    Order #Date Placed + + Total
    {{item.orderNo}}{{item.datePlaced | date:'MM/dd/yyyy'}}{{item.status}}{{item.total}}
    +
    +
    {{paginationOptions.totalItems}} items total
    +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + \ No newline at end of file diff --git a/dist/dataGrid.js b/dist/dataGrid.js index a5bdfeb..c85c4e4 100644 --- a/dist/dataGrid.js +++ b/dist/dataGrid.js @@ -55,10 +55,12 @@ } }); - $scope.sort = function (predicate) { - var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc'; - $scope.sortOptions.predicate = predicate; - $scope.sortOptions.direction = direction; + $scope.sort = function (predicate, isDefaultSort) { + if (!isDefaultSort) { + var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc'; + $scope.sortOptions.direction = direction; + $scope.sortOptions.predicate = predicate; + } $scope.paginationOptions.currentPage = 1; $scope.reloadGrid(); }; @@ -107,7 +109,7 @@ //custom filters $scope.filters.forEach(function (filter) { var urlName = filter.model, - value = $scope.$eval(urlName); + value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName); if (filter.disableUrl) { needApplyFilters = true; @@ -173,16 +175,16 @@ } if (value) { - $scope.__evaltmp = value; - $scope.$eval(urlName + '=__evaltmp'); + if (filter.isInScope) { + $scope.__evaltmp = value; + $scope.$eval(urlName + '=__evaltmp'); + } else { + $scope.$parent.__evaltmp = value; + $scope.$parent.$eval(urlName + '=__evaltmp'); + } } }); - if (!$scope.serverPagination) { - applyCustomFilters(); - } - - //pagination options $scope.paginationOptions.itemsPerPage = $scope.defaultsPaginationOptions.itemsPerPage; $scope.paginationOptions.currentPage = $scope.defaultsPaginationOptions.currentPage; @@ -212,10 +214,14 @@ function getData() { var url = $location.path().slice(1); - $scope._gridOptions.getData('?' + url, function (data, totalItems) { - $scope.filtered = data; - $scope.paginationOptions.totalItems = totalItems; - }); + if (!url && $scope.sortOptions.predicate) { + $scope.sort($scope.sortOptions.predicate, true); + } else { + $scope._gridOptions.getData('?' + url, function (data, totalItems) { + $scope.filtered = data; + $scope.paginationOptions.totalItems = totalItems; + }); + } // -> to promise //$scope._gridOptions.getData('?' + url).then(function (data, totalItems) { // $scope.filtered = data; @@ -260,7 +266,7 @@ $scope.filters.forEach(function (filter) { var predicate = filter.filterBy, urlName = filter.model, - value = $scope.$eval(urlName), + value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName), type = filter.filterType; if ($scope.customFilters[urlName]) { $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate); @@ -302,7 +308,7 @@ angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) { var element = angular.element(filter), - isInScope = directiveElement.find(element).length > 0, + isInScope = $element.find(element).length > 0, predicate = element.attr('filter-by'), filterType = element.attr('filter-type') || '', urlName = element.attr('ng-model'), @@ -329,7 +335,7 @@ element.attr('ng-change', 'filter()'); //$compile(element)($scope); } - + //$compile(element)($scope); filters.push({ model: urlName, isInScope: isInScope, diff --git a/dist/dataGrid.min.js b/dist/dataGrid.min.js index e9c6a48..31f08ff 100644 --- a/dist/dataGrid.min.js +++ b/dist/dataGrid.min.js @@ -1 +1 @@ -!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=e.$eval(n);if(r.disableUrl)return void(i=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(e.__evaltmp=n,e.$eval(i+"=__evaltmp"))}}),e.serverPagination||p(),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=e.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t){var i=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.predicate=t,e.sortOptions.direction=i,e.paginationOptions.currentPage=1,e.reloadGrid()},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(){e.urlSync||e.serverPagination?o():c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=[],s=[],l=r.parent(),c=n.id,p="true"===n.serverPagination;angular.forEach(angular.element(l[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");a.push(r),r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),a=l.find(n).length>0,s=n.attr("filter-by"),p=n.attr("filter-type")||"",g=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==p||(i[g+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~p.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+g+" : this."+g+"}')"),n.attr("ng-blur","filter('{"+g+" : this."+g+"}')")),g||(g=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:g,isInScope:a,filterBy:s,filterType:p,disableUrl:d}))}),angular.forEach(angular.element(l[0].querySelectorAll("[grid-item]")),function(t){var r=angular.element(t);s.push(r),p?r.attr("ng-repeat","item in filtered"):r.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),e(r)(i)}),i.sorting=a,i.rows=s,i.filters=o}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}(); \ No newline at end of file +!function(){"use strict";function t(t,e){var i=[];return t?(t.forEach(function(t){~i.indexOf(t[e])||i.push(t[e])}),i.map(function(t){return{text:t,value:t}})):void 0}angular.module("dataGrid",[]).filter("startFrom",function(){return function(t,e){return t?(e=+e,t.slice(e)):[]}}).controller("gridController",["$scope","$element","$filter","$location","filtersFactory",function(e,i,r,n,a){function o(){var t,i=!1;t="page="+e.paginationOptions.currentPage,e.paginationOptions.itemsPerPage!==e.defaultsPaginationOptions.itemsPerPage&&(t+="&itemsPerPage="+e.paginationOptions.itemsPerPage),e.sortOptions.predicate&&(t+="&sort="+encodeURIComponent(e.sortOptions.predicate+"-"+e.sortOptions.direction)),e.filters.forEach(function(r){var n=r.model,a=r.isInScope?e.$eval(n):e.$parent.$eval(n);if(r.disableUrl)return void(i=!0);if(a){var o;if(a instanceof Date){if(isNaN(a.getTime()))return;o=a.getFullYear()+"-",o+=a.getMonth()<9?"0"+(a.getMonth()+1)+"-":a.getMonth()+1+"-",o+=a.getDate()<10?"0"+a.getDate():a.getDate(),a=o}t+="&"+encodeURIComponent(n)+"="+encodeURIComponent(a)}}),i&&c(),n.path(t)}function s(){var t=n.path().slice(1),i={},r={};if(e.params=i,t.split("&").forEach(function(t){var e=t.split("=");i[e[0]]=e[1],"page"!==e[0]&&"sort"!==e[0]&&"itemsPerPage"!==e[0]&&(r[decodeURIComponent(e[0])]=decodeURIComponent(e[1]))}),e.filters.forEach(function(t){var i=t.model,n=r[i];if(!t.disableUrl){if(~t.filterType.toLowerCase().indexOf("date"))return e.$parent.__evaltmp=n?new Date(n):null,void e.$parent.$eval(i+"=__evaltmp");"select"!==t.filterType||n||(n=""),n&&(t.isInScope?(e.__evaltmp=n,e.$eval(i+"=__evaltmp")):(e.$parent.__evaltmp=n,e.$parent.$eval(i+"=__evaltmp")))}}),e.paginationOptions.itemsPerPage=e.defaultsPaginationOptions.itemsPerPage,e.paginationOptions.currentPage=e.defaultsPaginationOptions.currentPage,i.itemsPerPage&&(e.paginationOptions.itemsPerPage=i.itemsPerPage),i.page&&(!e.serverPagination&&(i.page-1)*e.paginationOptions.itemsPerPage>e.filtered.length?e.paginationOptions.currentPage=1:e.paginationOptions.currentPage=i.page),i.sort){var a=i.sort.split("-");e.sortOptions.predicate=decodeURIComponent(a[0]),e.sortOptions.direction=decodeURIComponent(a[1])}e.serverPagination||c()}function l(){var t=n.path().slice(1);!t&&e.sortOptions.predicate?e.sort(e.sortOptions.predicate,!0):e._gridOptions.getData("?"+t,function(t,i){e.filtered=t,e.paginationOptions.totalItems=i})}function c(){var t=Date.now(),i=!1;e._time={},e.sortOptions.predicate&&e.sortCache&&e.sortCache.predicate===e.sortOptions.predicate&&e.sortCache.direction===e.sortOptions.direction?(e.filtered=e.sortCache.data.slice(),i=!0):e.filtered=e._gridOptions.data.slice(),e._time.copy=Date.now()-t;var n=Date.now();p(),e._time.filters=Date.now()-n;var a=Date.now();e.sortOptions.predicate&&!i&&(e.filtered=r("orderBy")(e.filtered,e.sortOptions.predicate,"desc"===e.sortOptions.direction),e.sortCache={data:e.filtered.slice(),predicate:e.sortOptions.predicate,direction:e.sortOptions.direction}),e._time.sort=Date.now()-a,e._time.all=Date.now()-t,e.paginationOptions.totalItems=e.filtered.length}function p(){e.filters.forEach(function(t){var i=t.filterBy,r=t.model,n=t.isInScope?e.$eval(r):e.$parent.$eval(r),o=t.filterType;if(e.customFilters[r])e.filtered=e.customFilters[r](e.filtered,n,i);else if(n&&o){var s=a.getFilterByType(o);s&&(e.filtered=s(e.filtered,n,i))}})}e._gridOptions=e.$eval(i.attr("grid-options")),e._gridActions=e.$eval(i.attr("grid-actions")),e.serverPagination="true"===i.attr("server-pagination"),e.getDataDelay=i.attr("get-delay")||350,e._gridActions||(e.$parent.$eval(i.attr("grid-actions")+"= {}"),e._gridActions=e.$parent.$eval(i.attr("grid-actions"))),e._gridOptions.grid=e,e.filtered=e._gridOptions.data.slice(),e.paginationOptions=e._gridOptions.pagination?angular.copy(e._gridOptions.pagination):{},e.defaultsPaginationOptions={itemsPerPage:e.paginationOptions.itemsPerPage||"10",currentPage:e.paginationOptions.currentPage||1},e.paginationOptions=angular.copy(e.defaultsPaginationOptions),e.sortOptions=e._gridOptions.sort?angular.copy(e._gridOptions.sort):{},e.customFilters=e._gridOptions.customFilters?angular.copy(e._gridOptions.customFilters):{},e.urlSync=e._gridOptions.urlSync,e.$watch("_gridOptions.data",function(i){i&&i.length&&(e.sortCache={},e.filtered=e._gridOptions.data.slice(),e.filters.forEach(function(i){"select"===i.filterType&&(e[i.model+"Options"]=t(e.filtered,i.filterBy))}),e.urlSync?s(n.path()):c())}),e.sort=function(t,i){if(!i){var r=e.sortOptions.predicate===t&&"desc"===e.sortOptions.direction?"asc":"desc";e.sortOptions.direction=r,e.sortOptions.predicate=t}e.paginationOptions.currentPage=1,e.reloadGrid()},e.filter=function(){e.paginationOptions.currentPage=1,e.reloadGrid()},e.$on("$locationChangeSuccess",function(){(e.urlSync||e.serverPagination)&&(e.serverPagination&&(clearTimeout(e.getDataTimeout),e.getDataTimeout=setTimeout(l,e.getDataDelay)),e.filtered&&s(n.path()))}),e.reloadGrid=function(){e.urlSync||e.serverPagination?o():c()},e._gridActions.refresh=e.reloadGrid,e._gridActions.filter=e.filter,e._gridActions.sort=e.sort}]).directive("gridData",["$compile","$animate",function(e){return{restrict:"EA",scope:!0,controller:"gridController",link:function(i,r,n){var a=[],o=[],s=[],l=r.parent(),c=n.id,p="true"===n.serverPagination;angular.forEach(angular.element(l[0].querySelectorAll("[sortable]")),function(t){var r=angular.element(t),n=r.attr("sortable");a.push(r),r.attr("ng-class","{'sort-ascent' : sortOptions.predicate ==='"+n+"' && sortOptions.direction === 'asc', 'sort-descent' : sortOptions.predicate === '"+n+"' && sortOptions.direction === 'desc'}"),r.attr("ng-click","sort('"+n+"')"),e(r)(i)}),angular.forEach(angular.element(document.querySelectorAll("[filter-by]")),function(e){var n=angular.element(e),a=r.find(n).length>0,s=n.attr("filter-by"),l=n.attr("filter-type")||"",p=n.attr("ng-model"),d=n.attr("disable-url");c&&n.attr("grid-id")&&c!=n.attr("grid-id")||("select"!==l||(i[p+"Options"]=t(i.$eval(r.attr("grid-options")+".data"),s)),!~l.indexOf("date")||n.attr("ng-focus")||n.attr("ng-blur")||(n.attr("ng-focus","filter('{"+p+" : this."+p+"}')"),n.attr("ng-blur","filter('{"+p+" : this."+p+"}')")),p||(p=s,n.attr("ng-model",s),n.attr("ng-change","filter()")),o.push({model:p,isInScope:a,filterBy:s,filterType:l,disableUrl:d}))}),angular.forEach(angular.element(l[0].querySelectorAll("[grid-item]")),function(t){var r=angular.element(t);s.push(r),p?r.attr("ng-repeat","item in filtered"):r.attr("ng-repeat","item in filtered | startFrom:(paginationOptions.currentPage-1)*paginationOptions.itemsPerPage | limitTo:paginationOptions.itemsPerPage track by $index"),e(r)(i)}),i.sorting=a,i.rows=s,i.filters=o}}}]).factory("filtersFactory",function(){function t(t,e,i){return t.filter(function(t){return e&&t[i]?t[i]===e:!0})}function e(t,e,i){return t.filter(function(t){return e&&t[i]?~(t[i]+"").toLowerCase().indexOf((e+"").toLowerCase()):!!t[i]})}function i(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]<=e+86399999:!0})}function r(t,e,i){return e=new Date(e).getTime(),t.filter(function(t){return e&&t[i]?t[i]>=e:!0})}return{getFilterByType:function(n){switch(n){case"select":return t;case"text":return e;case"dateTo":return i;case"dateFrom":return r;default:return null}}}})}(); \ No newline at end of file diff --git a/src/js/dataGrid.js b/src/js/dataGrid.js index a5bdfeb..c85c4e4 100644 --- a/src/js/dataGrid.js +++ b/src/js/dataGrid.js @@ -55,10 +55,12 @@ } }); - $scope.sort = function (predicate) { - var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc'; - $scope.sortOptions.predicate = predicate; - $scope.sortOptions.direction = direction; + $scope.sort = function (predicate, isDefaultSort) { + if (!isDefaultSort) { + var direction = $scope.sortOptions.predicate === predicate && $scope.sortOptions.direction === 'desc' ? 'asc' : 'desc'; + $scope.sortOptions.direction = direction; + $scope.sortOptions.predicate = predicate; + } $scope.paginationOptions.currentPage = 1; $scope.reloadGrid(); }; @@ -107,7 +109,7 @@ //custom filters $scope.filters.forEach(function (filter) { var urlName = filter.model, - value = $scope.$eval(urlName); + value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName); if (filter.disableUrl) { needApplyFilters = true; @@ -173,16 +175,16 @@ } if (value) { - $scope.__evaltmp = value; - $scope.$eval(urlName + '=__evaltmp'); + if (filter.isInScope) { + $scope.__evaltmp = value; + $scope.$eval(urlName + '=__evaltmp'); + } else { + $scope.$parent.__evaltmp = value; + $scope.$parent.$eval(urlName + '=__evaltmp'); + } } }); - if (!$scope.serverPagination) { - applyCustomFilters(); - } - - //pagination options $scope.paginationOptions.itemsPerPage = $scope.defaultsPaginationOptions.itemsPerPage; $scope.paginationOptions.currentPage = $scope.defaultsPaginationOptions.currentPage; @@ -212,10 +214,14 @@ function getData() { var url = $location.path().slice(1); - $scope._gridOptions.getData('?' + url, function (data, totalItems) { - $scope.filtered = data; - $scope.paginationOptions.totalItems = totalItems; - }); + if (!url && $scope.sortOptions.predicate) { + $scope.sort($scope.sortOptions.predicate, true); + } else { + $scope._gridOptions.getData('?' + url, function (data, totalItems) { + $scope.filtered = data; + $scope.paginationOptions.totalItems = totalItems; + }); + } // -> to promise //$scope._gridOptions.getData('?' + url).then(function (data, totalItems) { // $scope.filtered = data; @@ -260,7 +266,7 @@ $scope.filters.forEach(function (filter) { var predicate = filter.filterBy, urlName = filter.model, - value = $scope.$eval(urlName), + value = filter.isInScope ? $scope.$eval(urlName) : $scope.$parent.$eval(urlName), type = filter.filterType; if ($scope.customFilters[urlName]) { $scope.filtered = $scope.customFilters[urlName]($scope.filtered, value, predicate); @@ -302,7 +308,7 @@ angular.forEach(angular.element(document.querySelectorAll('[filter-by]')), function (filter) { var element = angular.element(filter), - isInScope = directiveElement.find(element).length > 0, + isInScope = $element.find(element).length > 0, predicate = element.attr('filter-by'), filterType = element.attr('filter-type') || '', urlName = element.attr('ng-model'), @@ -329,7 +335,7 @@ element.attr('ng-change', 'filter()'); //$compile(element)($scope); } - + //$compile(element)($scope); filters.push({ model: urlName, isInScope: isInScope,