Custom Filter Issue

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/mznL52p8/161/

Hello, so I have this simple filtering plugin I created with https://datatables.net/manual/plug-ins/search , and this works pretty well filtering the table to only show items that have dates concurrent with the current week. It doesn't show anything outside of the week, and because of that that data isn't even searchable. Is there a way for it to filter that out, but if you want to find items with that are hidden i.e(in my example there is one object in the var data where it has a March date, if I wanted to search for that week based off of one date in that week, it will show that week?)

Here is my plugin code:

$.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var now = moment();
        var monday = now.clone().weekday(1);
        var friday = now.clone().weekday(5);
        
        let mondayF = monday.format('MM/DD/YYYY');
        let fridayF = friday.format('MM/DD/YYYY');
    
        var sMonday = searchData[2];
        var sFriday = searchData[10];
        
        if (mondayF == sMonday && fridayF == sFriday) {
            return true;
        }
        return false;
    }
);

Pretty much, it should hide data that isn't in the current week but have it still be searchable.

kthorngren

The search plugin will iterate over the rows that are remaining after all the Datatables searches are complete. You can use the search() or column().search() APIs to get the current search terms. If you want to keep those row visible you will need to add conditions to your search plugin to make sure those rows return true.

Kevin

zgoforth

@kthorngren so I checked out both APIS you link in your response, and it seemed the search() one was more along the lines of what I was looking for. I have been messing around with the responses in my plugin, and can't seem to get it to click.

Here is my most up-to-date JSFiddle. https://jsfiddle.net/BeerusDev/mznL52p8/166/

The changes I made were on lines 63 & 283

zgoforth

UPDATE: I have been focusing mainly on my search/filter plugin as I believe it could be achievable just through that. Every angle that I try to take, it either shows both results in my Fiddle off the bat which is still not it, or hides the non current date item, but it still isn't searchable: Here is most recent plugin update I have tried, accompanied by my JSFiddle: https://jsfiddle.net/BeerusDev/mznL52p8/171/

 $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var now = moment();
        var monday = now.clone().weekday(1);
        var friday = now.clone().weekday(5);
        
        let mondayF = monday.format('MM/DD/YYYY');
        let fridayF = friday.format('MM/DD/YYYY');
    
        var sMonday = searchData[2];
        var sFriday = searchData[10];
        
        if (mondayF == sMonday && fridayF == sFriday) {
            return true;
        } 
        if (sMonday < mondayF || sMonday > fridayF || sFriday < mondayF || sFriday > fridayF ){
            return false;
        } 

        return true;
    }
);

kthorngren

Your test case has lot going on, like rowGroups, which is difficult for us to dig through to understand what is going on. I suggest that you create a simpler test case that just contains the code you are interested in getting help with. Plus add details of how to see the problem you want fixed.

I created a simple example:
http://live.datatables.net/luqefizi/1/edit

It as a hard coded search for System Architect which simulates your date range search. It has a checkbox to enable including rows with the search term. Type New York in the search input there will only be two rows. Check the checkbox and you will see all rows with New York.

Kevin

zgoforth

@kthorngren http://live.datatables.net/quwihile/1/edit

I changed the values around just a bit to match some of the data that I am working with. I am experimenting with the button, and it sort of works for what I want to do. find data that contains a certain week value that is originally hidden. For example it is only showing the current week, but if you search 03/15/2021 or 05/17/2021 two items for each pop up! Which is good, but I need to figure out a way to do this without the checkbox, so it just automatically does it without an on click. What would be even better was if it was a date picker input type, I tried that but it didn't work.

kthorngren

I don't have time to look at your example right now but you don't need the checkbox. I added that for demo purposes.

Kevin

zgoforth

@kthorngren I figured that part out, my apologies please disregard my previous post.

http://live.datatables.net/vubumojo/1/edit Here is the working model.

2 Things:
Is it possible to input a date input type beside the search bar so I can choose from that and have it input into the search bar so I do not have to type the date in? Is this achievable with js?

i.e. this is what I tried on my actual application (that is the input's class name according to searching through dev tools but it tells Cannot set property 'type' of null

document.getElementById('form-control form-control-sm').type = 'date';

2.) Lastly, in my dynamic example which reflects my actual application, when the old date is typed in, it works just fine except it removes the row styling, this I thought had to do with the var api = new $fn.dataTable.Api so I removed the "new" and it still does the same thing. So I am assuming it has to do with the logic in my startRender function.

zgoforth

I am extra confused because it is keeping the tooltip on hover effect over each day cell, which those are defined in the columnDefs after my headerCallback.

kthorngren

Is it possible to input a date input type beside the search bar so I can choose from that and have it input into the search bar so I do not have to type the date in? Is this achievable with js?

Yes. You can create the input then add it as a custom element to the dom option like this example.

Lastly, in my dynamic example which reflects my actual application, when the old date is typed in, it works just fine except it removes the row styling,

What are the exact steps to show the issue with your example?

I am extra confused because it is keeping the tooltip on hover effect over each day cell, which those are defined in the columnDefs after my headerCallback.

Sounds like this is a different issue from this thread. Please start a new thread with a simple example if the problem.

Kevin

zgoforth

@kthorngren I'm sorry I meant to include that in my post I am swamped right now. So the one other data object that it is hiding contains a date 03/15/2021 type that in to the Search bar and you will see what I mean

kthorngren

I'm not sure what your calculations are but if you look at your debug output you will see this when filtering 03/15/2021:

```
05/24/2021

<?php editor_console=true:154 Red Count: 0 Green Count: 0 Yellow Count: 0 editor_console=true:154 0 editor_console=true:154 Green Status: NaN% ``` ?>

Either your calculation is not working the way you want or you need to add a condition to handle these results.

Kevin

zgoforth

@kthorngren that is what I figured, I am just curious. I have added an example conditional in my filter function here. https://jsfiddle.net/BeerusDev/9yqLfz07/9/

I am confused because I can have the filter function pretty much anywhere for it wo work, I just don't know how I can get the statusClass to append to the return after rowGroup.startRender. And I cannot have that in my conditional because it renders the return true unreachable/vice versa.

I wonder if I could use a sharepoint REST API query to change the current date to the date searched so it will still apply the styling?

zgoforth

So I am fooling around with the date picker in the custom tool bar, http://live.datatables.net/luqefizi/3/edit

I am having trouble getting the value to append to the search bar, or can I have the search bar removed and then the DataTable is searched by that value?