I have an issue connected with antd table pagination. I want to make a custom pagination and show 3 items per page at a table. So I am slicing my data into a 3 elements. Everything is ok at a console :) But when I set my array as a dataSource prop at first page everything is ok too. After clicking on a second page e.g it's like overriding previous page's data and shows on a second both data. I would be glad to know your opinion what's wrong in this code.
<Table
dataSource={investmentReturnsData.quarter1.data}
columns={this.investReturnColumns}
className="c-table c-table-default c-table-dashed hide_head paging_right"
pagination={{
pageSize: 3,
total: investmentReturnsData.quarter1.count,
onChange: (current) => this.getInvestmentReturnData('quarter1', current),
}}
/>
const slicedArray = returningData.slice((currentPage - 1) * 3, currentPage * 3);
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I created a page where I list all my items in a BootstrapVue b-table. for each item, I added the possibility to delete the item.
When I activate pagination with b-pagination element and :per-page attribute, I have an unexpected behavior on the page. The problem is it works only for the 1st page, but all others pages get the data of the 1st page. For example, if the total item is 10 and I'm displaying 5 items per page, the second page displaying the next 5 items will still try to delete the first page items.
<b-table
id="traffic-routes"
:fields="fieldsForTrafficRoutes"
:items="itemsForTrafficRoutes"
:per-page="perPageForTrafficRoutes"
:current-page="currentPageForTrafficRoutes"
>
<template v-slot:cell(action)="data">
<div class="d-flex align-items-center justify-content-end">
<a class="action-icon mr-2"
#click="removeRow(data.index)"
> Delete </a>
</div>
</template>
</b-table>
<b-pagination
v-model="currentPageForTrafficRoutes"
aria-controls="traffic-routes"
align="right"
:total-rows="
itemsForTrafficRoutes ? itemsForTrafficRoutes.length : 0"
:per-page="perPageForTrafficRoutes"
></b-pagination>
export default {
data() {
return {
perPageForTrafficRoutes: 5,
currentPageForTrafficRoutes: 1,
// ...
}
},
computed: {
...mapGetters([
'getAllTrafficRoutes',
]),
itemsForTrafficRoutes() {
return JSON.parse(JSON.stringify(this.getAllTrafficRoutes));
},
}
}
However, I tried to make the items dynamic:
itemsForTrafficRoutes() {
const foo = JSON.parse(JSON.stringify(this.getAllTrafficRoutes));
return foo.slice((this.currentPageForTrafficRoutes - 1) *
this.perPageForTrafficRoutes, this.currentPageForTrafficRoutes * this.perPageForTrafficRoutes
);
},
This will make the items unique for each page, it will only contain the first 5 on the first and then update to the next 5 items on the next page, however, the table only displays the first page and is empty on the next page even though the items are present
That's because you're using the index from the scoped slot.
The index will be based the displayed rows, and not the actual index of the item in the array provided to the items prop.
This is described on the docs down in the notes under the Scoped field slots section.
index will not always be the actual row's index number, as it is computed after filtering, sorting and pagination have been applied to the original table data. The index value will refer to the displayed row number. This number will align with the indexes from the optional v-model bound variable.
I would suggest either using a unique identifier from your object if you have one, or using the reference to remove it.
I have a datatable like below in my asp.net-4.5 page:
Name City Value Action
A B 10 delete
X Y 10 delete
T R 10 delete
ALL ALL 30
An HTML table is converted into such a datatable via $(#example).datatable()
When the "Delete" link is clicked, the regarding row is being deleted and the value of the row including ALL is being updated in javascript. So here, if I remove the first row, the table will be like below WITHOUT any page refresh.
Name City Value Action
X Y 10 delete
T R 10 delete
ALL ALL 20
One issue here is that the row having ALL TOTAL can be anywhere else, it is not always at the end of the table. The user can re-sort the table by clicking a column. For example, if Value column is clicked, the row including ALL will be the first row.
At this point, I want to locate where the row is located. To do that I have a for loop like below:
for (var i = 0, r; r = document.getElementById("example").rows[i]; i++) {
if ($('#example').find("tr:eq(" + i + ")").find("td:eq(2)").html() == 'ALL') {
locateALLrow = i;
break;
}
}
This for loop above works perfectly, when there is 1 page of data only (One page includes 10 rows). So my questions:
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
2- Is there a better way to locate the index of the row including ALL (as Name column).
Any advice would be appreciated. Thanks!
EDIT: Tried the loop like below, didn't fix:
for (var i = 0; i<document.getElementById("example").getElementsByTagName("tr").length; i++)
{...}
1 - How I can traverse the other rows located in other pages as well? This loop above only works for the first 10 rows and stops. How can I extend it to all table?
Instead of traversing the html table which shows only first n rows data when using pagination, try working with the datatable API. You'll be able to loop through complete data with that.
https://datatables.net/reference/api/rows().data()
2- Is there a better way to locate the index of the row including ALL (as Name column).
Same as above.Use datatable API instead of looping through current html shown data.
I have a, let's say, 250 rows, that devided into 25 pages. 10 rows on each page. If I'm on the first page, and I click on third row, I get rowIndex = 2. But if I'm on the second page and I click on the first row, logically I'm supposed to get rowIndex of 11th page, so should be rowIndex = 10. But I'm getting rowId = 0. How can I fix that?
In truth it is correct behaviour. Because when you click on first row, it is first index in table. It doesn't know about data on another pages because they just don't exists (why to load data which you don't need? It can does performance issue)
So if you want behaviour like you are describing, you have to select page number and calculate that.
Something like:
rowIndex = getRowIndex ...
page = grid.dataSource.page();
rowIndex = (page - 1) * 10 + rowIndex;
Here demo
I am using AngularJS to create a page which contains a list of products that shows information such as a name, price, region etc. This is displayed kind of like an accordion with the name in the header and extra information in the body.
Since there could be a large amount of these items displayed I am using dirPagination (https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination) to paginate these items. My markup at the moment looks like this:
<div class="custom-list" dir-paginate="asset in assets | itemsPerPage: 10 track by $index">
<div class="custom-list-item" ng-class="{'tag-hover': isHoveredTag(asset)}">
<div class="custom-list-item-heading" ng-click="toggleShowAssetDetails(asset)">
<p class="col-lg-5">{{ asset.name }}</p>
<div class="col-lg-offset-2 col-lg-3 rating">
<rating value="asset.rating" />
</div>
<button ng-click="addAsset(asset)"><span class="glyphicon glyphicon-plus"></span></button>
<div class="clearfix"></div>
</div>
<div class="custom-list-item-content" style="display: none" animate="shouldShowAssetDetails(asset)">
...
</div>
</div>
</div>
As you can see I'm using paginate in a pretty standard way just looping through the items in an array and displaying 10 per page. I also have a directive called rating which looks at a value called rating in the item. This is a number from 1 - 5 which is used to display a star rating system next to the name. The directive looks like this:
var rating = function ($compile) {
return {
restrict: "E",
scope: {
value: "="
},
link: function (scope, element, attrs) {
scope.$watch(attrs.rating, function () {
for (var i = 1; i <= 5; i++) {
if (i <= scope.value) {
var starElement = angular.element("<span class=\"icon icon-crown\"></span>");
$compile(starElement)(scope);
element.append(starElement);
} else {
var emptyStarElement = angular.element("<span class=\"icon-empty icon-crown\"></span>");
$compile(emptyStarElement)(scope);
element.append(emptyStarElement);
}
}
})
}
}
}
This looks at the value and inserts the icons based on the value of rating (e.g if the rating was 2 the directive would insert two icon-crown icon spans and 3 icon-empty icon-crown icon spans.
This was working perfectly fine before I included the pagination. However now it will only work for the first 10 items. When you change the page, the rating will not change and just keep the same icons from the previous page, even if the values are different.
I understand this is because the directive sets everything at the beginning and it will not run when you change page because the items aren't reloading they are just being shown and hidden again. But the directive is manipulating the DOM so it doesn't update when the page changes.
The problem is I don't know how to resolve this. I thought about changing the directive to look for the pagination current page instead but then I don't have access to the current list item.
I'd appreciate any help on getting the directive to update the icons when the page is changed.
Update
Here's a link to a Plunker project showing the problem I'm having: http://plnkr.co/edit/VSQ20eWCwVpaCoS7SeQq?p=preview
This is a very stripped down version of the section on my app that I'm having an issue with. There's no styling included although I have kept the CSS class structure. I've also changed the icons to use bootstrap ones just to simplify the Plunker project.
The functionality is the same however. If you go from page 1 to page 2 notice how the stars remain the same despite that fact that the asset rating values are different. However if you go to page 3 and back to page 2 or 1 they will change. The reason this happens is because there are less items on page 3 and therefore when you go back to page 1 or 2 the remaining items will be called again to retrieve the rating values.
You simply need to remove or replace track by $index.
Tracking by $index will give you the following behavior:
There is an array of max 10 length that represents the items to show. The first item will have index 0.
You go to the next page and the items in the array are replaced.
The first item in the array will still have index 0. Since you are tracking by index and the index has not changed, AngularJS will not recreate the DOM node representing the item. Since the DOM node isn't recreated, the directive will not execute this time and the rating will not update.
If you go from page 3 to page 2, the directive will execute for the 7 last elements on page 2, since they didn't exist on page 3, so they are considered new this time.
If you really need to use track by you should use a property that is actually related to the object (and unique), for example:
dir-paginate="asset in assets | itemsPerPage: 10 track by asset.name"
Demo: http://plnkr.co/edit/A80tSEliUkG5idBmGe3B?p=preview