Comments (20)
On my side, I used this.
.ng-table-pager { display: none; }
from ng-table.
This is what worked for me:
$scope.tableParams = new ngTableParams({
count: items.length // hides pager
},{
counts: [] // hides page sizes
});
from ng-table.
in my case i had to two tables to work with. under certain condition the one is shown and the other gets hidden and vice versa. and because the pagination div is created outside the table element therefore condition to hide or show a table will only hide or show the table but once the pagination is displayed it wont hide .
So i basically wrapped the whole table in a div and set condition on the div
<div ng-show="(showWaitingList || showAllUsersList) && !availabilityView">
<table ng-table="tableParams" show-filter="true" class="table" >
</table>
</div>
<div ng-show="availabilityView>
<table ng-table="tableParamsForAvailabilityView" show-filter="true" class="table" >
</table>
</div>
may be this solution could help someone..
Thanks.
from ng-table.
I downloaded Hidden pagination control (demo7), it did not work, I have to make this change to make it work, can you explain this? Thanks. By the way, the ngTable is really cool.
$scope.tableParams = new ngTableParams({
page: 1, // show first page
total: 1, // value less than count hide pagination
count: 5 // count per page
},{
counts: [] // hide page counts control
});
$scope.$watch('tableParams', function(params) {
$scope.users = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
}, true);
from ng-table.
Came across the same sort of issue, if you don't want any pagination you can also do count as
count: data.length
This will prevent any pagination at all
from ng-table.
Is there a way to remove the extra space that is still inserted where the pagination controls used to appear?
from ng-table.
@superraz375 you can modify styles of the body element, I believe margin-bottom.
from ng-table.
*tbody, of course.
from ng-table.
I think that the actual problem is inserting the whole template when it isn't needed. The template costs an extra HTTP request, extra angular bindings, extra HTML rendering, and extra blank space. In my opinion, this option not only should be available, but it should be the default. Result pagination is an "opt-in-like" feature. @esvit tell me if you agree with me... If you want, I can send you a PR for that.
from ng-table.
boly38: I have been struggling this problem for quite a while. Your answer is the most elegant one when it comes to print out the ng-table screen. Thanks.
from ng-table.
@penchiang yes but I agree with @viniciuspires : the best way would be to define this behavior by configuration to avoid extra unwanted stuff ..
from ng-table.
Here is another solution:
On your getData function of the ngTableParams add the code as following
this solution uses the native ngTable pager code
getData: function ($defer, params) { var data = []; /// set the data array to whatever data you have // Do some stuff // params.settings({ counts: data.length > 10 ? [10, 25, 50] : []}); }
from ng-table.
To disable the pagination you need to set "total" less than "count" and the "counts" equal to an empty array as the below example.
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5 // count per page
}, {
counts: [], // hide page counts control
total: 1, // value less than count hide pagination
getData: function($defer, params) {
$defer.resolve(data);
}
});
here the plunker
from ng-table.
@raytracer1975 disabling pagination != hiding pagination.
The feature being requested is actually to don't render the html or display:none
when it's not needed, instead of a visibility:hidden
-like solution like the current one.
from ng-table.
@viniciuspires reading the @anthony-o first comment seems he wanted to disable the pagination and used to hide it by css as a workaround...
from ng-table.
@raytracer1975 Yep :) But the thing here is actually like I commented on #6 (comment), there's no actual feature to literally "disable" the pagination. The only thing that happened was that the ng-repeat that loops through the counts
array is empty now, and the pager thinks that there's one page only. The css container is still there taking up space, the template is still downloaded and rendered, and the Angular bindings and listeners are still being allocated into memory. A feature to disable pagination would be like:
$scope.tableParams = new ngTableParams({}, {
paginate: false,
getData: function($defer, params) {
$defer.resolve(data);
}
});
... and just don't render the pagination template at all.
Don't you agree? :)
from ng-table.
@esvit I know you closed this issue, but how do you feel about this? PRs are welcome?
from ng-table.
For Hiding the pagination
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10000000 // count per page , Here either put a imaginary count or put maximum number of rows that you have in dataset
//Count:data.count
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
orderedData = params.filter() ?
$filter('filter')(orderedData, params.filter()) :
orderedData;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
And in front end
/Below one i have used stop hide the per page data reflection count/
.ng-table-pager {
display: none;
}
from ng-table.
This works fine for me.
.ng-table.no-pager + div .ng-table-pager {
display: none!important;
}
Then you can add .no-pager
class on the table which you want to hide the pagination.
from ng-table.
@viniciuspires
Totally agree, very unprofessional behaviour.
from ng-table.
Related Issues (20)
- Trigger getDAta on click NOT on key press HOT 1
- hai, i could not able to do any functionalities in ng table (sorting, pagination,filter) how to i work,
- Having ng-table as element directive with child element as table HOT 1
- Having ng-table as element directive with child element as table
- data loading animation while waiting data to be fetched from server HOT 1
- error TS2688: Cannot find type definition file for 'angular-mocks' HOT 1
- ng-table watchs isDataReloadRequired() erroneously
- Load Filter options dynamically
- Add range slider and selectize filters HOT 1
- How to get table row in controller? HOT 1
- 'Real world example' is simple demo
- Error on PlaceHolde on Filter
- Do you have plans to migrate ng-table to Angular X? HOT 1
- Custom sorting property for groups
- Number of displayed rows is limited by number of columns in ng-table-dynamic HOT 1
- Does not compile
- Demo site ng-table.com broken when using https HOT 1
- Ngtable - data show hide columsn
- not sorting polish alphabet
- angularjs ngTable pagination showing all the results in a single page and data is loading every time on same page using API calls
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-table.