Utilize DTOptionsBuilder and AngularJs ColVis to trigger actions when there are changes in column visibility

In my AngularJs project, I am using DTOptionsBuilder with ColVis plugin to show and hide columns in a datatable. I need to perform certain operations when the visibility of the columns changes. I came across an event called 'column-visibility.dt' which notifies when the visibility of columns is altered. I want to achieve something similar to the code snippet below in an Angular way, but I'm unsure how to proceed.

$('#example').dataTable();

$('#example').on( 'column-visibility.dt', function ( e, settings, column, state ) {
    console.log(
        'Column '+ column +' has changed to '+ (state ? 'visible' : 'hidden')
    );
} );

Answer №1

After implementing the necessary changes, my issue has been successfully resolved. I have discovered a useful option to incorporate a callback function during the State change of the columns. The following code snippet demonstrates how to achieve this when initializing the colvis plugin:

var colvis = new $.fn.dataTable.ColVis(table, {
     buttonText: '  ',
     align: 'right',
     exclude: _excludeColumns,
     stateChange: function(iColumn, bVisible) {
         console.log('Column '+iColumn+' set to '+ bVisible);
         //Perform actions here
     }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method to fill a mat-select dropdown with an existing value?

I am encountering an issue with a mat-form-field that contains a dropdown of data fetched from an API. I can successfully select an option and save it to the form. However, upon returning to the dropdown or reloading the page, the saved value does not appe ...

The JavaScript function is returning a value of undefined

I encountered an issue where my Javascript function is returning undefined even though it alerts the correct value within the function itself. I have a setup where I call the function in my 1st controller like this: CustomerService.setName(data.name); A ...

Execute Babel task individually for each file instead of running it on the entire directory, Grunt

I've set up a Grunfile to monitor .js files in the src/ directory and trigger the babel task from https://github.com/babel/grunt-babel to generate ES5 files in the dist/ directory: module.exports = function(grunt) { require('load-grunt-task ...

The DiscordBot is configured to send a personalized direct message to users who have chosen a specific role

Having trouble setting up my bot to send a DM to new members who choose the Advertising role, and I can't figure out why. I'm fairly new to this. const { Client, GatewayIntentBits } = require('discord.js'); const client = new Client({ ...

Retrieve the id for the chosen user name within a function that contains an array of objects

const userList = [ {name:"jonh" ,id:EAD1234}, {name:"peter" ,id:EAD1235}, {name:"matt" ,id:EAD1236}, {name:"henry" ,id:EAD1237}, ] In the array above, there are various users with their respective IDs. The goal is t ...

I'm curious about the process of uploading an image file to a Mongoose database using the Mean JS

Recently diving into the mean stack, I'm curious about how to efficiently upload an image file to the database using mongoose and angularjs. I've scoured the internet for code examples, but nothing seems to fit my needs. Any guidance or snippets ...

The use of ng-model within ng-repeat seems to be causing a conflict with the scope model, preventing it from updating properly

I'm encountering a strange issue that I can't quite pinpoint. There is something odd happening with my contenteditable directive, which allows me to assign an ng-model to a div (borrowed from Angular documentation). This setup is meant to save an ...

Learn the process of using Angular Js to compare checkbox values with stored comma-separated values in a database

When displaying amenity checkbox options using ng-repeat of a JSON array and saving them into the database as comma-separated IDs like "1,3,7" within a single string, the challenge arises when needing to edit the amenities. This is due to retrieving the ex ...

Fancybox may be difficult to spot when using Safari

Currently, I am utilizing fancybox with the latest versions of jquery.min.js (3.3.1), jquery.fancybox.css (3.5.7), and jquery.fancybox.pack.js (3.5.7). Everything is functioning as expected on all browsers except for Safari. On Safari, the content within ...

"Node.js is giving an error stating that the object does not have a

I am attempting to save the user details from the registration form into a JSON file for authentication purposes. However, I am having trouble appending the data in the correct format. Here is the code snippet that I have tried: var filename = "./user_log ...

Error: Unable to access the lexical declaration 'useStyles' before it has been initialized in the React Collapse Component. This issue occurred while trying to fetch data using axios in the Material-

I am facing an issue while trying to display data fetched from the backend (array with objects) and hide a portion of it under a collapsible button using Material-UI in React. The code works perfectly when all lines are written within a single component ca ...

Update the knockout values prior to submitting them to the server

Imagine having a ViewModel structured like this with prices ranging from 1 to 100... var Item = { price1: ko.observable(), price2: ko.observable(), price3: ko.observable(), ... ... price100: ko.observable(), name: ko.observable ...

Setting up TypeScript compilation for TS modules in an AngularJs application: A comprehensive guide

After conducting a test, it has come to my attention that TypeScript 2.6.2 imposes a requirement where imported elements need to be used in a new before the module is referenced in a require. The test is based on the following code snippets extracted from ...

In order to locate a matching element within an array in a JSON file and update it, you can use Node

Good day, I have a script that updates the value in a JSON file const fsp = require('fs').promises; async function modifyNumberInFile() { try { let data = await fsp.readFile('example.json'); let obj = JSON.parse(dat ...

Contrast between the act of passing arguments and using apply with arguments

I have an important backbone collection that utilizes a save mixin to perform Bulk save operations (as Backbone does not natively support this feature). // Example usage of Cars collection define([ 'Car', 'BulkSave' ], function(Car ...

Dynamically loading a webpage with an element roster

I have a list and I want it so that when a user clicks on the sport1 list item, results from the database table sport1 will be displayed. Similarly, if they click on the education1 list item, results from the education1 table should be shown. The issue i ...

Exploring Vue.JS with Staggered Transitions and Enhancing User Experience with Loading More

The VueJS Guide offers a clever method for using the item's index to create a delayed transition for the items in the data set. You can learn more about it here. While this approach works great when the data set remains static, I'm encountering a ...

Middleware in Express.js designed to alter the response object

One method I'd like to explore is using middleware functions to alter the response. app.use(function(request, response, next) { .. do something .. next(); // moves to next middleware }); When it comes to modifying the request and response ob ...

Vue Testing Utilities - issue with data not updating upon click event activation

I recently created a basic test using Vue Test Utils: import { mount } from '@vue/test-utils' const App = { template: ` <p>Count: {{ count }}</p> <button @click="handleClick">Increment</button> `, ...

retrieve a single result from firebaseArray based on unique id

I am seeking assistance with developing a message system in my app to facilitate communication between couriers and customers. Currently, there is a view displaying a list of messages from all couriers the customer has interacted with for each errand. I a ...