How to use different options provided by angular datatable – dtOptions

How to use different options provided by angular datatable - dtOptions

In this article lets understand different options provided by angular datatable in dtOptions.

If you have no idea about how to implement datatable, checkout this article on it’s installation guide in angular.

Angular datatable provides many options to play with data displaying such as searching, pagination, sorting, ordering etc.

So, let’s get started and explore them.

Check below snippet and we will see each of their functionality:

    this.dtOptions = {
      pagingType: 'full_numbers', // Pagination type
      pageLength: 5, // Number of rows per page
      lengthMenu: [5, 10, 25, 50], // Page length menu options
      searching: true, // Enable searching
      ordering: true, // Enable sorting
      serverSide:true,
      stateSave:true,
      procssing:true,
      ajax: (dataTablesParameters:any,callack:any){
          this.service.subscribe((resp:any) => {
             this.users = resp.users;
         }
      },
      language: {
        // Customize the DataTable's text and messages
        lengthMenu: 'Display _MENU_ records per page',
        search: 'Search: ',
        zeroRecords: 'No matching records found',
        info: 'Showing page _PAGE_ of _PAGES_',
        infoEmpty: 'No records available',
        infoFiltered: '(filtered from _MAX_ total records)',
        paginate: {
          first: 'First',
          last: 'Last',
          next: 'Next',
          previous: 'Previous'
        }
      },
     columns:[
          {data: 'id', title: 'ID',"bSortable":false},
          {data: 'email'},
          {data: 'age'},
    ],
 columnDefs: [
        { orderable: false, targets: -1 } // Disable sorting for the last column (Email)
      ],
    };

1) pagingType

Set to 'full_numbers' to show pagination with first, last, next, and previous buttons. See below:

dtOptions pagingType

2) pageLength

pageLength will display number of record to display in single page.

dtOptions pageLength

3) lengthMenu

lengthMenu will display what page length count we can change for display

lengthMenu: [5, 10, 15, 20],

dtOptions lengthMenu

4) searching

searching: true, // enable searching, default

dtOptions searching

searching: false, // disable searching

5) ordering

ordering:true // enable sorting

dtOptions ordering

ordering:false // disable sorting

6) columnDefs

columnDefs: [
        {
          targets: 1, // This refers to the second column (index 1)
          render: function (data, type, row) {
            return data + ' years old';
          },
          orderable:false
        },
        {
          targets: '_all', // Apply this configuration to all columns
          className: 'text-center', // Add the class 'text-center' to all columns
        },
      ],

Using the “render” function, we have altered how the second column appears in this example. It adds ‘years old’ to the end of the information in that column. Additionally, we’ve applied the ‘text-center’ class to all columns using “columnDefs,” centering the text in each cell.

You can set different configurations for certain columns using the “columnDefs” function, including altering the sorting behaviour, using custom rendering, adding classes, hiding columns, etc.

dtOptions columnDefs

7) language

You can change the texts using the language option:

language: {
        // Customize the DataTable's text and messages
        lengthMenu: 'Display _MENU_ records per page',
        search: 'Find: ',
        zeroRecords: 'No matching records found',
        info: 'Showing page _PAGE_ of _PAGES_',
        infoEmpty: 'No records available',
        infoFiltered: '(filtered from _MAX_ total records)',
        paginate: {
          first: 'First',
          last: 'Last',
          next: 'Next page',
          previous: 'Previous page'
        }
      }
dtOptions language

8) serverside

serverSide:true

It means the data being used are fetched from server and hence for every dynamic option it will fetch data from server be it searching, sorting etc.

9) processing

processing: true,

“processing” option is to display a loading indicator or message while the DataTable is being processed, such as during data retrieval or any other operations. Use this when working with large datasets or when data is coming asynchronously from a server.

10) ajax

ajax: (dataTablesParameters:any,callack:any){
     this.service.subscribe((resp:any) => {
         this.users = resp.users;
     }
},

Ajax is to fetch server side data and process. Basically dynamic data. In angular we basically use service and subscribe to data as above.

11) stateSave

When the stateSave option is set to true, DataTables will automatically save the state of the table (e.g., current page, sorting, filtering, etc.) into the browser’s local storage.

stateSave:true

12) columns

In this example, the columns option is used to define three columns for the table: “ID,” “Name,” and “Age.” Each column object contains a data property, which specifies the data source for that column. The title property is used to set the column header.

columns:[
          {data: 'id', title: 'ID',"bSortable":false},
          {data: 'email'},
          {data: 'age'},
    ]

That’s it on how to use different options provided by angular datatable – dtOptions. Hope this finds you helpful.

Read more articles on angular here.