Can't get Datatables row group working with ajax-CodePudding

I am trying to group rows in my table based on date ranges using the first column's data("Due_Date") and using the rowGroup extension from Datatables. I have searched and tried solutions from others such as using the data property('Due_Date') vs. the index of an array([0]) and removed buttons from table to prevent conflicts. I believe the versions of jQuery, Datatables, and rowGroup extensions are correct. I actually need the table to be split into three groups(red, yellow, and green) based on the table legend.(If "Due_Date" is before, current date, the current date, or 1 or 2 days after the current date, the group = red group. 3-4 days after current date = yellow group, and 5 or more days after current date = green group.) I realize I don't have the correct logic for the grouped date ranges but as of now I can't get the table to group by the data property at all. The table displays data but it seems as if the grouping is being ignored? Apologies in advance, I'm new to this and not sure where I'm going wrong. Any help is appreciated. Here is my relevant code:

//html

<table  id="circuitsDueTable">
     <caption style="caption-side:top">
          <ul>
               <li><span style="background-color:#ff3333;font-weight:bolder">RED</span> = Current 
                    Date: Plus Two Days</li>
               <li><span style="background-color:#ffff4d;font-weight:bolder">YELLOW</span> = 
                    Pending: Three to Four Days</li>
               <li><span style="background-color:#4dff4d;font-weight:bolder">GREEN</span> = Have 
                    Time: Five or More Days</li>
          </ul>
     </caption>
     <thead>
          <tr>
               <th>OCV DUE DATE</th>
               <th>CIRCUIT NAME</th>
               <th>OCV</th>
               <th>CIRCUIT VIEW</th>
          </tr>
     </thead>
     <tbody id="circuitsDueTableBody"></tbody>
     <tfoot></tfoot>
</table>

//javascript/jquery

function getTable() {
    $.ajax({
        url: baseUrl   "VoltReading/GetOCVDue",
        method: "POST",
        dataType: "json",
        success: function(data) {

            if (circuitsDueTable) {
                circuitsDueTable.destroy();
            }

            circuitsDueTable = $("#circuitsDueTable").DataTable({
                data: data,
                order: [
                    [0, "asc"]
                ],
                rowGroup: {
                    dataSrc: "Due_Date"
                },
                columns: [{
                        data: 'Due_Date'
                    },
                    {
                        data: 'Circuit_Num'
                    },
                    {
                        data: 'Stage_Num'
                    },
                    {
                        render: function(data, type, row) {
                            return '<button  
                                 value="'   row.Circuit_Id   '">View Circuit</button></a>';
                        }
                    }
                ],
                //return moment(row.Due_Date).format();
            });
        }
    });
}
getTable()

//php controller

public function GetOCVDue()
{
    $ocvsDue = $this->ocv->SelectCircuitOCVDates();
    echo json_encode($ocvsDue);
}

//json data

[
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-10","Stage_Num":"1"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-13","Stage_Num":"1"},
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-14","Stage_Num":"2"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-17","Stage_Num":"2"},
{"Circuit_Id":"88","Circuit_Num":"090622001B","Due_Date":"2022-09-22","Stage_Num":"3"},
{"Circuit_Id":"89","Circuit_Num":"090622002C","Due_Date":"2022-09-22","Stage_Num":"3"},
{"Circuit_Id":"90","Circuit_Num":"0909221B","Due_Date":"2022-09-25","Stage_Num":"3"}
]

CodePudding user response：

Here is a basic approach - I say "basic" because it does not use a library such as