Initialize table based on if condition with different column and rows.

pavan.a

Description of problem:
Scenario 1:
I am loading datatable on page load event, where consider the column name

column 1: Employee,
column 2: JobDescription(custom dropdown column),
column 3: Job Location(Custom dropdown column),
column 4: Shift(Custom dropdown column)

Scenario 2:
Now when I click on search criteria in which if selected date is less than current date than I have to
display table like below

column 1: Employee
column 2: JobDescription (label)
column 3 : Attendance(custom dropdown column)
column 4 : Hours (custom textbox column)

In above both scenario I am able to get the all the custom components. The only issue is, I am not able to redraw the table
for scenario 2 when click for searching criteria. Is there any way that I can create table again and fill table with new values
and custom components which are already created by me. but just have to fit in datatable.

rf1234

Just load all of the columns (i.e. all six of them) and hide / show columns dynamically depending on the situation.

The easiest way to do this is to assign classes to your columns in your HTML and then use "addClass" or "removeClass" with jQuery. That's how I do it.

You can also use the api for this:https://datatables.net/reference/api/column().visible()

pavan.a

Thanks but is will not work for me. Because same columns will part a different role.
For scenario 1 it will take as dropdown column and for scenario 2 it will take part as a label - means string value. So it might not work for me. I found the other solution.

$("#searchEmployer").on("click", function (event) {

    if (moment.utc(moment.utc().add(1, 'days').format()).local().format("L") == moment.utc(moment.utc($('#selectDate').val()).format()).local().format("L")) {
        $(".product-data-table").remove();
        $(".pageContent").append("<table class='full-width-responsive table mb-0' role='grid' id='tblEmployer'></table>");
        BindEmployerList()
    }
    else {
        $(".product-data-table").remove();
        $(".pageContent").append("<table class='full-width-responsive table mb-0' role='grid' id='tblEmployer'></table>");
        BindPreviousEmployerList()
    }

});