Pagination re-direction issue

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

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 ...

}

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

Thanks Its working

Hi Ravi

1. First, we need to enable scrollX and set autoWidth: false to make the column widths respect our settings:

2. In your datatableConfig, add width to the column definitions directly:

3. Add some CSS to ensure the table respects the column widths:

4. Update your DOM structure to handle horizontal scrolling properly:

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" }

  ]

};

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

  ]

};

<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>

this.dtOptions = {

     scrollX: true,

     // other options

   };

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

Glad to hear the solution is working well for you.

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));

if (this.reload) {

  this.reload.subscribe(data => {

    this.modalService.dismissAll();

    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));

  });

}

Hi Ravi Kakadiya

The link you provided is the demo page for wizard form component. Are you working on datatable?

Thanks