Unused custom function

Attempting to implement an exclude button for the multi_select filter_type, utilizing multi_select_custom_func. Also experimenting with custom_funcp. The issue at hand is the custom function never gets invoked. I have verified that it falls within yadcf's scope as I've executed a call right before initialization to test it.

My goal is to integrate this feature with server-side data retrieval (for both the table and select boxes) and AJAX pagination. Any additional tips or recommendations would be greatly appreciated.

Unable to replicate the problem in a snippet due to the requirement of server-side loading. However, I was able to resolve it without server-side loading. Suspecting the issue may be related to the columns parameter in the datatable setup.

Here are the parameters being utilized:

columns = [
                { data: "count" ,             title: "Occurrences" },
                { data: "source" ,            title: "Source" },
                { data: "relationship" ,      title: "Relation"},
                { data: "target_label" ,      title: "Target" },
                { data: "target_type" ,       title: "Target Type"},
                { data: "relationship_uri" ,  title: "Details", sortable: false,
                    render: function ( data, type, row, meta ) {
                        return `<a href="${data}"><i class="material-icons text-info">info</i></a>`;
                    }
                }
            ]

table = $(table_html).DataTable({
            pageLength: 10,
            buttons: [
                {
                    text: 'Reset Filters',
                    action: function ( e, dt, node, config ) {
                        yadcf.exResetAllFilters($(table_html).DataTable());
                    }
                }
            ],
            sDom: "<'row'<'col-sm-4'l><'col-sm-4'B><'col-sm-4'i>><'row'<'col-sm-12'tr>><'row'<'col-sm-12'p>>",
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            serverSide: true,
            ajax: url,
            processing: true,
            deferRender: false,
            responsive: true,
            //stateSave: true,
            bAutoWidth: false,
            bSortCellsTop: true,
            columns: columns,
            order: [0, 'desc']
        });


yadcf.init(table, [
                    {
                        column_number: 0,
                        filter_type: "range_number"
                    }, 
                    {
                        column_number: direction == 'in' ? 1 : 3,
                        filter_type: "multi_select",
                        select_type: 'select2',
                        sort_as: 'none'
                    }, 
                    {
                        column_number: 2,
                        filter_type: "multi_select",
                        select_type: 'select2',
                        sort_as: 'none'
                    }, 
                    //3rd is the 1
                    {
                        column_number: 4,
                        filter_type: "custom_func",
                        select_type: 'select2',
                        sort_as: 'none',
                        custom_func: myCustomFilterFunction,
                        data: [{
                          value: 'Donna',
                          label: 'Donna'
                        }, {
                          value: 'sad',
                          label: 'Sad'
                        }, {
                          value: 'angry',
                          label: 'Angry'
                        }, {
                          value: 'lucky',
                          label: 'Lucky'
                        }, {
                          value: 'january',
                          label: 'January'
                        }],
                        filter_default_label: "Custom func filter"
                    }
                ], 
                {filters_tr_index: 1}
        );
javascriptdatatablesyadcf

Answer №1

The issue with the custom function arises when you set searching to false. To resolve this problem, make the following changes in the code 

  oTable = $('.mytable2').DataTable({
    pageLength: 10,
    scroller: false//,
    //Do not disable the searching functionality
    //searching: false
  });

Feel free to test out the updated code snippet

Answer №2

After extensive searching, I was unable to find a solution using yadcf. As a result, I took matters into my own hands and developed custom exclude toggles. These were then integrated into the AJAX data sent by DataTables.

ajax: {
                url: url,
                data:  function(data, settings) {
                    var table = $(`#${settings.sTableId}`); //get current table
                    table.find('.exclude_toggle').each(function(idx, element){
                        var field = $(element).attr('field');
                        var exclude = $(element).attr('exclude');
                        var column = _.find(data.columns, column => column.data == field);
                        column.search.exclude = JSON.parse(exclude.toLowerCase());
                    });
                    return data;
                }
}, [...]

To utilize the exclude toggle feature, you can call

$(`#${table_id}`).DataTable().ajax.reload();

within the click event to trigger DataTables to make a fresh request to the server.

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

When CSS animations are active, the jQuery hide().slideDown() function fails to execute properly

I am a beginner in this field. Initially, I used jQuery to create three divs (buttons) that slid down when the page loaded. I also added an expansion effect on mouseover. This method worked fine in Safari but not in Firefox. So I made some modifications. ...

javascriptjqueryhtmlcss

Guide on generating a dynamic loop in JavaScript using the group name as a variable

I have been attempting to organize a group, dynamically ungroup it, and then create a loop with each element of the group. Despite reviewing multiple examples, I have not been able to solve the following issue: The grouping is done based on the "tipo" pro ...

javascriptjqueryarraysjson

Trigger a click event on a div element that is nested within a form

Having trouble displaying an alert when clicking on a disabled button because the user needs to first click on a terms checkbox. Here's my jQuery code: $('#divButton').on("click", function() { if ($('#buybutton').prop('d ...

javascriptjqueryhtmlformsclick

Using Vue.js: applying a CSS class to a child element within a component

Is it possible to insert a class into a component class tag from the HTML file? For instance, if we have a component like the one below and want to replace the icon field with whatever is used in the HTML file. Sample code from MyButton.vue file: <temp ...

javascriptlaravelvue.js

When incorporating <Suspense> in Next.js, the button's interaction was unexpectedly lost

'use client' import React, { Suspense } from "react"; const AsyncComponent = async () => { const data = await new Promise((r) => { setTimeout(() => { r('Detail'); }, 3000) }) as string; return <div>{d ...

javascriptreactjsnext.js

Troubleshooting the "pendo is not defined" eslint error in a react project

Recently, I've been working on adding the Pendo snippet to my React application. This involved including the JavaScript snippet and utilizing pendo.initialize({visitor:{id:'id'}). Everything seemed to be functioning properly until an ESLint ...

javascriptreactjsauthentication

Is there a way to identify when Change Detection has been triggered in Angular2 without using @Output directly?

Imagine the following structure of components in Angular2 A B D E When D triggers an event by clicking on B, Angular2 will automatically initiate change detection starting from the root component A. But is there a method to log this change detect ...

javascriptangulartypescriptzonejs

Creating a 3D model with consistent scale using Three JS

I'm currently facing a challenge where I need to incorporate multiple .OBJ files (3D Models) into my Three.js scene using an Input File. My goal is to ensure that all the models are of uniform size. The issue arises from the fact that these 3D models ...

javascript3dthree.js

Encountered a error 500 while attempting to POST using Postman in Node.js

After successfully setting up the server, I encountered an issue when attempting to create a user using Postman with the details in Application/JSON format. The server responded with: POST /sign-up 500. Initially, I tried specifying utf-8 without succes ...

javascriptnode.jsexpress

Ways to set a default image for an <img> tag

I am looking to set a default image to the img tag in case the user has not selected a profile picture for their account. Here is the current output: http://jsfiddle.net/LvsYc/2973/ Check out the default image here: This is the script being used: funct ...

javascriptjquerycsshtml

Utilize different versions of jQuery along with various plugins

I have integrated the AdminLTE Template into my project, which requires jQuery Version 3.X. Additionally, I am using the Flotchart jQuery library, which specifically needs jQuery Version 1.11.3. To handle this conflict, I have implemented the $.noConflic ...

javascriptjqueryflot

JQuery for personalized path animations

After developing an android app that sends onTouchEvents points to a web server, I've been able to retrieve motion points JSON data using Ajax. Here is a snippet of the data: {"data":[ {"x":224.28035,"y":235.4906}, {"x":263.32916,"y":219.45718}, {"x" ...

javascriptjqueryjsonanimation

Placing a pin on the map: AngularJS

Struggling to grasp AngularJS and its mapping capabilities has been quite challenging for me. Currently, my code looks like this: <map data-ng-model="mymapdetail" zoom="11" center="{{item.coordinates}}" style="heigth:375px"> <div ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

The attempt to compress the code from this particular file within the node_modules directory was unsuccessful

Hey there! I'm facing an issue while attempting to compile my React project using npm run build. Upon running this command in the console, I encountered the following error message: Failed to minify the code from this file: ./node_modules/react- ...

javascriptnode.jsreactjsnpm

After relocating JavaScript code into modules, encountering an error stating 'Cannot read property ClassList of Undefined'

Looking for some guidance in separating my JS code into modules. Everything was working fine when it was all in one file, but after moving it to a module, I'm running into issues. My goal is to make certain elements on my site change visibility based ...

javascripthtmlimportmoduleexport

What are some effective design principles for creating REST APIs in expressjs?

To streamline my code organization, I made the decision to create a methods folder. Within this folder, I store individual JavaScript files for each URL endpoint (such as website.com/billings). //expressJS configuration... const billings = require('. ...

javascriptnode.jsrestapiexpress

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

The SkyBox in THREE.js is a visually stunning feature that

I've been trying to create a SkyBox in THREE.js, following some tips I found online. However, none of the methods seem to work for me. I have double-checked the file paths and image paths, so I'm not sure what's causing the skybox not to app ...

javascriptthree.jsskybox

Tips for transitioning Callback Authentication to Promise in mongoose with nodejs

When attempting to switch from using callbacks to promises in Nodejs with Mongoose, I encountered an error stating "(Failed to serialize user into session)". Any assistance would be greatly appreciated... var localStrategy = require('passport-local ...

javascriptnode.jsexpressmongoose

Attempting to simultaneously start my node.js server and React .js app, resulting in the error message 'ERR_MODULE_NOT_FOUND'

Currently facing issues while setting up a server for an ecommerce site being built in React. Attempting to run both the React app and the server simultaneously using npm run dev, but encountering various errors that persist even after attempted fixes foun ...

javascriptnode.jsreactjsnpmnpm-scripts