Pagination re-direction issue
regarding pagination in tables , when i am on the page 6 in table and delete any item in that case the page is redirected to first page after deleting the item
i am using this url: https://preview.keenthemes.com/metronic8/angular/demo1/crafted/pages/wizards/vertical
Replies (14)
Hello Faizal,
Thank you for your previous help.
I'm currently using Angular for my UI, and while working with dropdowns, I've noticed that most of the demos feature single-selection dropdowns. However, as per my requirements, I need a multi-selection dropdown using KeenThemes.
Could you please guide me or provide an example that supports multiple selections?
This is my single selection dropdown code
<div *ngIf="templateModel.scope == 2" class="col-md-6 fv-row mb-7">
<label for="group" class="required fw-semibold fs-6 mb-2">Group</label>
<div>
<select class="form-select form-select-solid"
data-kt-select2="true" data-placeholder="Select option"
data-allow-clear="true" name="groupId"
[(ngModel)]="templateModel.groupId" #group="ngModel"
required
[disabled]="isDisableAccount()">
<option *ngFor="let option of groupsData"
[value]="option.id">{{ option.name }}
</option>
</select>
<div *ngIf="group.invalid && (group.dirty || group.touched)"
class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
<div *ngIf="group.errors?.['required']">group is required</div>
</div>
</div>
</div>
Hi Ravi
We have replied the example code here:
https://devs.keenthemes.com/question/unable-to-find-multi-selection-dropdown-in-any-of-demos
Thanks
Hi Ravi
This is default behavior in DataTables for numeric columns. Let's fix this by explicitly setting left alignment for all columns.
Here's how to modify your code:
ngOnInit(): void {
this.dtOptions = {
dom: "<"row"<"col-sm-12 overflow-auto"tr>>" +
"<"d-flex justify-content-between"<"col-sm-12 col-md-5"i><"d-flex justify-content-between"p>>",
processing: true,
ordering: false,
paging: true,
pageLength: 10,
pagingType: "full_numbers",
language: {
processing: "<span class="spinner-border spinner-border-sm align-middle"></span> Loading..."
},
// Add columnDefs to force left alignment for all columns
columnDefs: [
{
targets: "_all",
className: "text-start dt-left", // Combine Bootstrap and DataTables classes
type: "html" // Prevent automatic type detection that might trigger right alignment
}
],
...this.datatableConfig,
};
if(this.module !== "statistics" && this.authService.checkUserRole())
this.renderActionColumn();
this.dtOptions.ordering = true;
this.setupSweetAlert();
// ... existing code ...
}And in the parent component, modify your datatableConfig:
ngOnInit(): void {
this.datatableConfig = {
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
// ... existing ajax code ...
},
columns: [
{
title: "Account Name",
data: "accountResponse.accountName",
className: "text-start dt-left",
},
{
title: "Age",
data: "accountResponse.age",
className: "text-start dt-left",
// Force this column to be treated as string to avoid numeric alignment
type: "string"
},
],
// You can keep this if you specifically need it for the first column
createdRow: function (row) {
$("td:eq(0)", row).addClass("d-flex align-items-center");
}
// Remove initComplete as we"re handling alignment in columnDefs
};
}I want table data into the left side of columns, so initially its showing correct but when i am reordering the table data, the numeric data is go from left to right side
This is my code:
ngOnInit(): void {
this.datatableConfig = {
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
var orderColumnIndex = dataTablesParameters.order[0]?.column;
var orderDirection = dataTablesParameters.order[0]?.dir;
var orderColumnName =
dataTablesParameters.columns[orderColumnIndex]?.data;
let reqBody = {
draw: dataTablesParameters.draw,
length: dataTablesParameters.length,
start: dataTablesParameters.start,
search: dataTablesParameters.search.value,
orderBy: orderDirection == undefined ? 'asc' : orderDirection,
column: orderColumnName == undefined ? 0 : orderColumnName,
};
this.accountService
.getAccountDetails(reqBody)
.subscribe((resp: any) => {
callback(resp.Response);
});
},
columns: [
{
title: 'Account Name',
data: 'accountResponse.accountName',
render: function (data) {
return data;
},
},
{
title: 'Age',
data: 'accountResponse.age',
render: function (data) {
return data;
},
},
],
createdRow: function (row) {
$('td:eq(0)', row).addClass('d-flex align-items-center');
},
initComplete: () => {
$('td.dt-type-numeric').css('text-align', 'left');
},
};
}
<app-crud [datatableConfig]="datatableConfig" route="/apps/accounts"
(deleteEvent)="delete($event)" (editEvent)="editAccount($event)"
(createEvent)="createAccount()" [reload]="reloadEvent"
[module]="'account'"
[modal]="formModal"></app-crud>
In crud component
ngOnInit(): void {
this.dtOptions = {
dom: "<'row'<'col-sm-12 overflow-auto'tr>>" +
"<'d-flex justify-content-between'<'col-sm-12 col-md-5'i><'d-flex justify-content-between'p>>",
processing: true,
ordering: false,
paging: true,
pageLength: 10,
pagingType: 'full_numbers',
language: {
processing: '<span class="spinner-border spinner-border-sm align-middle"></span> Loading...'
},
...this.datatableConfig,
};
if(this.module !== 'statistics' && this.authService.checkUserRole())
this.renderActionColumn();
this.dtOptions.ordering = true;
this.setupSweetAlert();
if (this.reload) {
this.reload.subscribe((data) => {
this.modalService.dismissAll();
this.datatableElement.dtInstance.then((dtInstance: any) =>
dtInstance.ajax.reload(null, false)
);
});
}
}
I need the data should not be changed there position after reordering the column
Hi Ravi
1. First, we need to enable scrollX and set autoWidth: false to make the column widths respect our settings:
// In your crud component
this.dtOptions = {
// ... existing options ...
scrollX: true,
autoWidth: false,
columnDefs: [
{ targets: 0, width: "550px" },
{ targets: 1, width: "200px" },
{ targets: [3, 5], width: "120px" }
]
};2. In your datatableConfig, add width to the column definitions directly:
this.datatableConfig = {
// ... existing config ...
columns: [
{
title: "Account Name",
data: "accountResponse.accountName",
width: "550px", // Add width here
render: function (data) {
return data;
}
},
{
title: "Account Status",
data: "accountResponse.accountStatus",
width: "200px", // Add width here
render: (data) => {
return data;
}
},
// ... other columns ...
]
};3. Add some CSS to ensure the table respects the column widths:
::ng-deep {
.dataTables_wrapper {
.dataTable {
table-layout: fixed;
th, td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}4. Update your DOM structure to handle horizontal scrolling properly:
this.dtOptions = {
dom: "<"row"<"col-sm-12 overflow-x-auto"tr>>" +
"<"d-flex justify-content-between"<"col-sm-12 col-md-5"i><"d-flex justify-content-between"p>>",
// ... rest of your options
};Try implementing these changes and let me know if you still have issues with the column widths.
This is my code
1:======= >>
this code is from crud component
this.dtOptions = {
dom: "<'row'<'col-sm-12 overflow-auto'tr>>" +
"<'d-flex justify-content-between'<'col-sm-12 col-md-5'i><'d-flex justify-content-between'p>>",
processing: true,
ordering: false,
paging: true,
pageLength: 10,
pagingType: 'full_numbers',
language: {
processing: '<span class="spinner-border spinner-border-sm align-middle"></span> Loading...'
},
...this.datatableConfig,
columnDefs: [
{ targets: 0, width: "550px" }, // First column
{ targets: 1, width: "200px" }, // Second column
{ targets: [3, 5], width: "120px" } // Fourth and sixth columns
]
};
the columnDefs is added as per your suggestion but not increasing the witdh of column
2:===== >>
this code is from my component where i am using common crud component for tables
this.datatableConfig = {
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
var orderColumnIndex = dataTablesParameters.order[0]?.column;
var orderDirection = dataTablesParameters.order[0]?.dir;
var orderColumnName =
dataTablesParameters.columns[orderColumnIndex]?.data;
let reqBody = {
draw: dataTablesParameters.draw,
length: dataTablesParameters.length,
start: dataTablesParameters.start,
search: dataTablesParameters.search.value,
orderBy: orderDirection == undefined ? 'asc' : orderDirection,
column: orderColumnName == undefined ? 0 : orderColumnName,
};
this.accountService
.getAccountDetails(reqBody)
.subscribe((resp: any) => {
callback(resp.Response);
});
},
columns: [
{
title: 'Account Name',
data: 'accountResponse.accountName',
render: function (data) {
return data;
},
},
{
title: 'Account Status',
data: 'accountResponse.accountStatus',
render: (data) => {
return data;
},
},
{
title: 'Application',
data: 'applicationResponse',
render: (data) => {
const names = data.slice(0, 2).map((field: any) => field.name);
return data.length > 2
? names.join(', ') + '...'
: names.join(', ');
},
},
{
title: 'License',
data: 'licenseResponse.name',
render: (data) => {
return data;
},
},
{
title: 'License Validity',
data: 'validityTimeFrame',
render: (data) => {
return moment(data).format('DD/MM/YYYY');
},
},
{
title: 'LicenseBlocked',
data: 'isLicenseBlocked',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit Applies',
data: 'accountResponse.rateLimitApplies',
render: (data) => {
return data;
},
},
{
title: 'Log',
data: 'accountResponse.loggingStatus',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit/Min',
data: 'accountResponse.rateLimitPerMin',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit/Day',
data: 'accountResponse.rateLimitPerDay',
render: (data) => {
return data;
},
},
{
title: 'White List Applies',
data: 'accountResponse.whiteListedIPs',
render: (data) => {
return data != null && data.iPs?.length > 0 ? true : false;
},
},
{
title: 'Provider',
data: 'providerResponse',
render: (data) => {
const providerName = data
.slice(0, 2)
.map((field: any) => field.providerName);
return data.length > 2
? providerName.join(', ') + '...'
: providerName.join(', ');
},
},
{
title: 'Groups',
data: 'groupResponse',
render: (groupResponse) => {
const groupNames = groupResponse
.map((response:any) =>
response.groups.map((group:any) => group.groupName).filter(Boolean)
).flat();
const displayedNames = groupNames.slice(0, 2).join(', ');
return groupNames.length > 2
? displayedNames + '...'
: displayedNames || 'No Groups';
},
},
{
title: 'Users',
data: 'userResponse',
render: (data) => {
const name = data.slice(0, 2).map((field: any) => field.name);
return data.length > 2 ? name.join(', ') + '...' : name.join(', ');
},
width: '300px',
},
],
createdRow: function (row) {
$('td:eq(0)', row).addClass('d-flex align-items-center');
},
initComplete: () => {
$('td.dt-type-numeric').css('text-align', 'left');
},
};
in that also i have added last column width but its not working
html file code .
<app-crud [datatableConfig]="datatableConfig" route="/apps/accounts"
(deleteEvent)="delete($event)" (editEvent)="editAccount($event)"
(createEvent)="createAccount()" [reload]="reloadEvent"
[module]="'account'"
[modal]="formModal"></app-crud>
Hi
Yes, you can set specific widths for individual columns in DataTables. Here are several approaches:
Option 1: Using columns definition
// In your component where you initialize DataTables
this.dtOptions = {
// other options...
columns: [
{ title: "ID", width: "50px" },
{ title: "Name", width: "200px" },
{ title: "Position", width: "150px" },
{ title: "Office", width: "120px" },
{ title: "Start date" }, // No width specified, will auto-adjust
{ title: "Salary", width: "100px" }
]
};Option 2: Using columnDefs (more flexible)
this.dtOptions = {
// other options...
columnDefs: [
{ targets: 0, width: "50px" }, // First column
{ targets: 1, width: "200px" }, // Second column
{ targets: [3, 5], width: "120px" } // Fourth and sixth columns
]
};Option 3: Using HTML markup (if you're defining the table in HTML)
<table class="display">
<thead>
<tr>
<th >ID</th>
<th >Name</th>
<th >Position</th>
<th >Office</th>
<th>Start date</th>
<th >Salary</th>
</tr>
</thead>
</table>Setting fixed widths may impact responsiveness on smaller screens. You might want to use percentages instead of pixels for a more responsive design.
If you have many columns, consider enabling horizontal scrolling:
this.dtOptions = {
scrollX: true,
// other options
};Thanks
Hi
as you know i am using datatables in that for table headings there is not common width are showing, If it is possible to give width for each column or those columns on which i want to give the width
Hi
the pagination reset issue is related to how DataTables handles reloading after deletion. The problem is in how the table is refreshed after a delete operation.
The fix needs to be implemented in the component that handles the delete operation and table reload.
The reload handler calls dtInstance.ajax.reload() without parameters.
// CURRENT CODE (resets pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload());
// CHANGE TO (preserves pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));In file crud.component.ts where the reload event is being handled, around line 70-73. Could you please try these changes?
/angular/demo6/src/app/modules/crud/crud.component.ts
if (this.reload) {
this.reload.subscribe(data => {
this.modalService.dismissAll();
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));
});
}Let us know if it is not working.
Thanks
Hi Ravi Kakadiya
The link you provided is the demo page for wizard form component. Are you working on datatable?
Thanks
Yes, I am working on datatables.
as of now, i have completed 3 projects using Metronic, and this issue is arising in all the projects
