Add minimum rows in data table (chrome extension development).

Nivesh D

```
(function () {
console.log($('#lvIdleTime'));
lvIdleTime = $('#lvIdleTime').DataTable({
"bPaginate": false, //hide pagination
"bFilter": false, //hide Search bar
"bInfo": false, // hide showing entries

    columns: [
        {
            "data": null, render: function (data, type, row) {
                if (data.FromTime === null) {
                    return '';
                }
                //return (new Date(data.FromTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }).substring(0, 8));
                return getHMSFromMili(data.FromTime);
            }
        },

        {
            "data": null, render: function (data, type, row) {
                if (data.ToTime === null) {
                    return '';
                }
                //return (new Date(data.ToTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }).substring(0, 8));
                return getHMSFromMili(data.ToTime);
            }
        },
        { data: 'Description' },
        { data: 'ActivityName' },
        { data: 'FromTime' },
        { data: 'ToTime' }
    ], 
    setRowProps: () => ({
        onDoubleClick: (row, dataIndex) => {
            alert("double click!");
        }
    }),
    "columnDefs": [
        { "targets": [4, 5], "visible": false, "searchable": false }
    ],

});


// function removeEmptyRows() {
//     const emptyRows = lvIdleTime.rows('.empty-row');
//     emptyRows.every(function () {
//         this.remove();
//     });
//     lvIdleTime.draw(false);
// }

// function ensureMinimumRows(minRowCount) {
//     const dataRowCount = lvIdleTime.rows().data().length;
//     if (dataRowCount < minRowCount) {
//         const emptyRowCountToAdd = minRowCount - dataRowCount;
//         addEmptyRows(emptyRowCountToAdd);
//     }
// }

$("#BtnAdd").click(function () {
    if (SplitIdleTimeData()) {
        $('#divlvIdleTime').show();
        $('#resetDiv').show();
    }

});

// rest of the code
})();
function SplitIdleTimeData() {
FromTimePicker = document.getElementById('txtFrom');
ToTimePicker = document.getElementById('txtTo');

// some more codes 
let data = {
    FromTime: GetDateTime(FromTimePicker.value, idledata.FromTime),
    ToTime: GetDateTime(ToTimePicker.value, idledata.ToTime),
    Description: $("#ActivityDescription").val(),
    ActivityName: $("#selActivity option:selected").text(),
    ActivityId: $("#selActivity option:selected").val()
};
$("#table tr td:nth-child(1)").each(function () {
    var texttocheck = this.innerText.trim();
    if (texttocheck == data.FromTime) {
        message = "Selected From Time and To Time is already exists in the list.";
        console.log("showing message: " + message);
        $("#alert-body").html('<p>' + message + '</p>');
        Modalalert.show();
        return false;
    }
    //return false;
});
console.log("the data is %o", data);
console.log("the data is %s", JSON.stringify(data));
//the data is {"FromTime":1690280181734,"ToTime":1690280250974,"Description":"Work Review","ActivityName":"1824","ActivityId":2}
 // Add logic to check if there are already empty rows
 lvIdleTime.row.add(data).draw(false); // Draw without resetting the current paging position

 var rowCount = lvIdleTime.data().count();
 if(rowCount<3){
    addEmptyRows(2);
 }

//  // Remove any empty rows if necessary
//  const dataRowCount = lvIdleTime.rows().data().length;
//  const emptyRows = lvIdleTime.rows('.empty-row');

//  if (dataRowCount >= 3 && emptyRows.length > 0) {
//      emptyRows.every(function () {
//          this.remove(); // Remove the empty row
//      });
//      lvIdleTime.draw(false); // Redraw without resetting the current paging position
//  } 
function addEmptyRows(count) {
    for (let i = 0; i < count; i++) {
        const data = {
            Description: '',
            ActivityName: '',
            FromTime: null,
            ToTime: null
        };
        const newRow = lvIdleTime.row.add(data).node();
        $(newRow).addClass('empty-row');
    }
    lvIdleTime.draw();
}


SetNextTimeValueForDateControls();
if (new Date(GetDateTimeWithoutSeconds(FromTimePicker.value)).getTime() >= new Date(GetDateTimeWithoutSeconds(ToTimePicker.value)).getTime()) {
    let compareDurationInSeconds = 59;
    if (lvIdleTime.rows().data().length > 0) {
        var dataFirst = lvIdleTime.rows(0).data()[0];
        FromTimePicker.value = new Date(idledata.FromTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }).substring(0, 8);
        ToTimePicker.value = new Date(dataFirst.ToTime).toTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }).substring(0, 8);
    }
}
$("#selActivity").prop('selectedIndex', 0);
$("#ActivityDescription").val("");
return true;

}```

i want to maintain minimum three rows in my data table, if the 1st row added(by clicking add button) i want to show 2 empty rows along with that , if the next row added the 1 empty row need to remove , from the above code the empty rows are added at the top of the table this is my problem , i am fresher to development please solve this problem

colin

Take a look at the rowFill plugin, that may do what you want. That pads the table to a fixed number of rows if less exist.

Also, this example from this thread is doing something similar,

Colin