Angular datatables Column reordering is not working in Angular9 and Angular11

[afeef1915]

What i need

• I need to reorder every column left and right same way datable lib works. Data table lib should works https://datatables.net/extensions/responsive/examples/column-control/colreorder.html

Whereas Angular datable Lib has limitations only 1 column draggable .

Followed Link https://l-lin.github.io/angular-datatables/#/extensions/colreorder

Stack blitz Link

https://stackblitz.com/edit/angular-ivy-tddmbw

ERROR

Error: $ is not defined

Html

 <table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

Any solution is most welcome

Reference https://stackoverflow.com/questions/65717504/column-reorder-is-not-working-in-angular-data-tables

I have rollback to old stack blitz version where i did not found error

https://stackblitz.com/edit/angular-datatables-gitter-jasgfw

But Column reorder not working

Tried the Angular solution but did not work

https://stackoverflow.com/questions/65735662/typeerror-fn-datatable-colreorder-is-not-a-constructor

[shanmukhateja]

Hi,

Error: $ is not defined

The error indicates jQuery wasn't found when running the project on browser. It most likely means jQuery wasn't properly initialized. Please check if jQuery is properly setup in angular.json. Make sure the path provided matches inside node_modules.

If all fails, remove the library and its dependencies (jQuery and datatables.net stuff) and re-install it using ng add angular-datatables@<version_number>. You can find latest versions for your Angular project at Releases page.

Also, there seems to be an issue with the first StackBlitz link. It was throwing CORS errors. This is a StackBlitz issue.

[afeef1915]

Thanks for looking into this issue.

I have created new stack blitz where there is no Errors and used sample code exactly the same as given link

https://l-lin.github.io/angular-datatables/#/extensions/colreorder

Stack blitz https://stackblitz.com/edit/angular-datatables-gitter-jasgfw

This code does not works in Angular 9

         dom: "Rt",
  // Use this attribute to enable colreorder
     colReorder: {
    order: [1, 0, 2],
    fixedColumnsRight: 2
     }

All libs are loaded in dependencies as well but column reordering did not work.

Any suggestion please

[afeef1915]

Hi,

Error: $ is not defined

The error indicates jQuery wasn't found when running the project on browser. It most likely means jQuery wasn't properly initialized. Please check if jQuery is properly setup in angular.json. Make sure the path provided matches inside node_modules.

If all fails, remove the library and its dependencies (jQuery and datatables.net stuff) and re-install it using ng add angular-datatables@<version_number>. You can find latest versions for your Angular project at Releases page.

Also, there seems to be an issue with the first StackBlitz link. It was throwing CORS errors. This is a StackBlitz issue.

Hi Please can you also share working stack blitz js for column reorder.

Thanks

[shanmukhateja]

Hi,

Error: $ is not defined

The error indicates jQuery wasn't found when running the project on browser. It most likely means jQuery wasn't properly initialized. Please check if jQuery is properly setup in angular.json. Make sure the path provided matches inside node_modules.

If all fails, remove the library and its dependencies (jQuery and datatables.net stuff) and re-install it using ng add angular-datatables@<version_number>. You can find latest versions for your Angular project at Releases page.

Also, there seems to be an issue with the first StackBlitz link. It was throwing CORS errors. This is a StackBlitz issue.

Hi Please can you also share working stack blitz js for column reorder.

Thanks

Is this what you're looking for?

Repo

[afeef1915]

Hi,

Error: $ is not defined

The error indicates jQuery wasn't found when running the project on browser. It most likely means jQuery wasn't properly initialized. Please check if jQuery is properly setup in angular.json. Make sure the path provided matches inside node_modules. If all fails, remove the library and its dependencies (jQuery and datatables.net stuff) and re-install it using ng add angular-datatables@<version_number>. You can find latest versions for your Angular project at Releases page. Also, there seems to be an issue with the first StackBlitz link. It was throwing CORS errors. This is a StackBlitz issue.

Hi Please can you also share working stack blitz js for column reorder. Thanks

Is this what you're looking for?

Repo

Thanks for the reply .

I need Exactly like this https://datatables.net/extensions/colreorder/

Please can you share stack blitz link so that i can replicate issue.

Many Thanks

[shanmukhateja]

Hi, I noticed your StackBlitz link isn't including ColReorderWithResize.js in angular.json. Try the zip file I've attached. It is Angular 9 project which uses code from your StackBlitz link.

sandbox9.zip

[afeef1915]

Hi, I noticed your StackBlitz link isn't including ColReorderWithResize.js in angular.json. Try the zip file I've attached. It is Angular 9 project which uses code from your StackBlitz link.

sandbox9.zip

Thanks for the reply

I tried your repository ColReorderWithResize github project Angular 10 and thanks its works in dev machine.

So i have found 2 issue

Issue 1

Only column data table moved and data remains the same

Issue 2 does it work if if order is by default.

Only issue i found if order is set by default

       order: (this.dtOrder) ? [this.dtOrder.column, this.dtOrder.dir] : [0, 'asc'],

But when

     order:[[0, 'asc']] ,   this doesn't cause any issue

Error in this line of code

  /*
 * Convert all internal indexing to the new column order indexes
 */
 /* Sorting */
       for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ )
     {
        oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ];
        }

Another Major issue i have noticed

**Only column changing its order data remains the same**

i have changed date of birth order and data remains the same , only column changes.

Please can you advice.

Thanks very much

[afeef1915]

Hi Dev

Issue found when binding data through ajax .

Hard code data works, but it doesn't works for dynamic data

Before

After

Only Column changing data remains same in dynamic data

Working stack blitz https://stackblitz.com/edit/angular-datatables-angular-6-h8iho7

Thanks

[shanmukhateja]

@afeef1915 is this issue resolved? Can I mark it as closed?

[afeef1915]

Thanks for the reply.

Issue is not resolved.

Only columns are swapping but not data in datatable.

Please can you fix This Major Bug in your library.

You can see i can swap first name but not its data

Thanks

[afeef1915]

@afeef1915 is this issue resolved? Can I mark it as closed?

Please can you create example populating data through ajax and you can see ColReorderWithResize wont work

  ajax: (dataTablesParameters: any, callback) => {
    this.http
      .post<any>(
        "https://angular-datatables',
        dataTablesParameters,
        {}
      )
      .subscribe(resp => {
        that.lista = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
  },

Thanks

[shanmukhateja]

Hi,

The problem is DT table's column resizing is done by manipulating table columns along with its data when dragged. However:

1. In the ajax callback, we're informing DT that there is no data to render (data: [] in callback).
2. The rows you see on the table are from Angular who doesn't have a clue that you're manipulating table columns.

You will need to use DT to display the data for column resizing and dragging operations to be successful.

1. Update your AJAX callback as follows:

ajax: (dataTablesParameters: any, callback) => {
    this.http
      .post<any>(
        "https://angular-datatables',
        dataTablesParameters,
        {}
      )
      .subscribe(resp => {
        // that.lista = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data      // let DT render the table
        });
      });
  },

2. Set your table related HTML code to as shown below and render the content using appropriate callbacks provided by DT. You might wanna look at rowCallback.

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

Pro Tip: If you need to use DT extensions, do not use Angular way examples on your project.

[afeef1915]

Hi,

The problem is DT table's column resizing is done by manipulating table columns along with its data when dragged. However:

1. In the ajax callback, we're informing DT that there is no data to render (data: [] in callback).
2. The rows you see on the table are from Angular who doesn't have a clue that you're manipulating table columns.

You will need to use DT to display the data for column resizing and dragging operations to be successful.

1. Update your AJAX callback as follows:

ajax: (dataTablesParameters: any, callback) => {
    this.http
      .post<any>(
        "https://angular-datatables',
        dataTablesParameters,
        {}
      )
      .subscribe(resp => {
        // that.lista = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data      // let DT render the table
        });
      });
  },

1. Set your table related HTML code to as shown below and render the content using appropriate callbacks provided by DT. You might wanna look at rowCallback.

<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

Pro Tip: If you need to use DT extensions, do not use Angular way examples on your project.

Thanks for the reply.

I tried ajax code

  ajax: (dataTablesParameters: any, callback) => {
this.http
  .post<any>(
    "https://angular-datatables',
    dataTablesParameters,
    {}
  )
  .subscribe(resp => {
    // that.lista = resp.data;
    callback({
      recordsTotal: resp.recordsTotal,
      recordsFiltered: resp.recordsFiltered,
      data: resp.data      // let DT render the table
    });
  });

},

Thanks

[shanmukhateja]

Could you post what your output from AJAX call looks like? In the error, DT is complaining its unable to fetch data for row 0 column 0. If you check our documentation, the AJAX calls returns data something like this. Your AJAX calls responses need to match the data being sent to DT for rendering table.

[afeef1915]

Could you post what your output from AJAX call looks like? In the error, DT is complaining its unable to fetch data for row 0 column 0. If you check our documentation, the AJAX calls returns data something like this. Your AJAX calls responses need to match the data being sent to DT for rendering table.

Data is dynamic for example

But im post processing json in html,

    {
    "data": {
        "success": "Y",

        "data": {
            "results": [{
                    "datab_id": {
                        "type": "text",
                        "value": "35365436546"
                    },
                    "datab_title": {
                        "type": "text",
                        "value": "Ms"
                    },
                    "datab_surname": {
                        "type": "text",
                        "value": "fsdrgfrg"
                    },
                    "datab_forename": {
                        "type": "text",
                        "value": "dgrtgr"
                    },
                    "datab_initials": {
                        "type": "text",
                        "value": "Vdg"
                    },

            }],
         "count": "7",
         "filteredCount": "3"
    },
    },
  }

How can i use data attribute of callback in html without using this.lista ajax

  ajax: (dataTablesParameters: any, callback) => {
    this.http
      .post<any>(
        "https://angular-datatables-demo-server.herokuapp.com/",
        dataTablesParameters,
        {}
      )
      .subscribe(resp => {
       // that.lista = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data
        });
      });
  },

html

                   <tbody *ngIf="lista?.length > 0">
                  <tr *ngFor="let item of lista">
              <td>{{item.id}}</td>
            <td>{{item.firstName}}</td>
            <td>{{item.lastName}}</td>
            </tr>
              </tbody>

Json is complex we already processed in html, Please can you suggest best approach for column reorder with changing much in html.

passing data in data key in callback causing problem

    .subscribe(resp => {
       // that.lista = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: resp.data
        });

[shanmukhateja]

Your AJAX isn't matching your input. Take a look at my previous comment's AJAX output. Update your server endpoint to return data as specified in AJAX example link. Checkout the "Ajax way" example on documentation for more info.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed due to inactivity. Please feel free to re-open the issue to add new inputs.

[AhsanNissar]

@shanmukhateja How can I reorder full column body instead of just header if I am sending table data from another component via @Input() decorator? Here is a sample of my code

[shanmukhateja]

@AhsanNissar create a new issue with a StackBlitz link or GitHub repo.