After Table Filter with DatePicker Rows.Every Loses Styling

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/9yqLfz07/52/

Hello, so attached is my test case above. To see the issue that I am experiencing, once the DataTable loads, use the Date Picker and select any date between [03/15/2021 - 03/19/2021] or [05/17/2021 - 05/21/2021]. I am hiding any objects from the table that aren't apart of the current week, but still have the old items searchable. When you select one of those, it does what it is supposed to do and shows the hidden item, the huge/last issue keeping me from having this project done is that it removes the styling applied in the startRender function. I realize because this is using the current date to apply it, so I need to make a new conditional to apply styles. I have been struggling and struggling with this, as I do not know how nor where I would implement it without it interfering with the current status, I cannot write it in my filter function, because wouldn't that make the return $('<tr/>).addClass(statusClass) unreachable?

kthorngren

Adding some console logs to see your data and the calculations results in this when selecting 05/17/2021:

```
05/24/2021

<?php editor_console=true:160 data {Department: "BD", Employee: "Goku Dev", Monday: "05/17/2021", MondayStatus: "P", MondayLocation: "Office", …} editor_console=true:160 today 05/27/2021 editor_console=true:160 result undefined editor_console=true:160 todayStatus n/a editor_console=true:160 Red Count: 0 Green Count: 0 Yellow Count: 0 editor_console=true:160 0 editor_console=true:160 Green Status: NaN% ``` ?>

See this example:
https://jsfiddle.net/gf0mjud4/

Looks like todayStatus is n/a. You don't have a condition for n/a. What do you want the color to be with n/a?

Kevin

zgoforth

It is returning n/a because the pre-filter is searching knowing its the current week/dates. If there are more than one item in the same week, then it will be two n/as in console and it will apply the same style to those items even though they could have a different status. I want to still style the based off the day. Since it is data.MondayStatus I could make a conditional to apply to it after the filter, but I do not know where or how I could apply that.

Is it even possible to apply things only post filter?

var today = moment().format("MM/DD/YYYY"); // "05/10/2021"
              
                    var result = Object.keys(data).find(key => typeof data[key] === 'string' && data[key].startsWith(today)); // "Monday;

                    var todayStatus = result ? data[result + 'Status'] : 'n/a'; 

kthorngren

I don't understand your requirements and data but the rows parameter will contain all the rows displayed for the group. If you select 05/17/2021 then this statement is resulting in result being undefined. The today variable is 05/27/2021 but the data for the single row being displayed does not contain 05/27/2021.

var result = Object.keys(data).find(key => typeof data[key] === 'string' && data[key].startsWith(today)); // "Monday"

I want to still style the based off the day.

Are you expecting more rows to be displayed if you choose 05/17/2021? Where do you expect the today data to be found?

Kevin

zgoforth

I meant I want to style the day off of the status, so another conditional to apply if it is not the current day... Wait I may have just figured something out, I will be back with a test case

zgoforth

@kthorngren I went off your recommendation from a couple of posts up when result = undefined and todayStatus = n/a so I added on to my conditional and it didn't work as expected Here is the test case https://jsfiddle.net/7kdj6cum/

if(todayStatus === "P" || todayStatus === "TW") {
                            counter.green++;
                        }
                        if(todayStatus === "NR" || todayStatus === "TRV") {
                            counter.yellow++;
                        }
                        if (todayStatus === "PTO" || todayStatus === "H") {
                            counter.red++;
                        }
                        if (todayStatus === undefined && result == "n/a"){
                            if(data.MondayStatus === "P" || data.MondayStatus === "TW"){
                                counter.green++;
                            }
                            if(data.MondayStatus === "NR" || data.MondayStatus === "TRV"){
                                counter.yellow++;
                            }
                            if(data.MondayStatus === "PTO" || data.MondayStatus === "TRV"){
                                counter.red++;
                            }
                            if(data.TuesdayStatus === "P" || data.TuesdayStatus === "TW"){
                                counter.green++;
                            }
                            if(data.TuesdayStatus === "NR" || data.TuesdayStatus === "TRV"){
                                counter.yellow++;
                            }
                            if(data.TuesdayStatus === "PTO" || data.TuesdayStatus === "TRV"){
                                counter.red++;
                            }
                            if(data.WednesdayStatus === "P" || data.WednesdayStatus === "TW"){
                                counter.green++;
                            }
                            if(data.WednesdayStatus === "NR" || data.WednesdayStatus === "TRV"){
                                counter.yellow++;
                            }
                            if(data.WednesdayStatus === "PTO" || data.WednesdayStatus === "TRV"){
                                counter.red++;
                            }
                            if(data.ThursdayStatus === "P" || data.ThursdayStatus === "TW"){
                                counter.green++;
                            }
                            if(data.ThursdayStatus === "NR" || data.ThursdayStatus === "TRV"){
                                counter.yellow++;
                            }
                            if(data.ThursdayStatus === "PTO" || data.ThursdayStatus === "TRV"){
                                counter.red++;
                            }
                            if(data.FridayStatus === "P" || data.FridayStatus === "TW"){
                                counter.green++;
                            }
                            if(data.FridayStatus === "NR" || data.FridayStatus === "TRV"){
                                counter.yellow++;
                            }
                            if(data.FridayStatus === "PTO" || data.FridayStatus === "TRV"){
                                counter.red++;
                            }

kthorngren

Take a look at the debug output. Looks like you have todayStatus and result swapped with the values they contain. In this statement:

if (todayStatus === undefined && result == "n/a"){

Stack Overflow is a more appropriate forum for help with building the Javascript code to support your business logic.

Kevin