How to bind a onClick event with a button to display DataTable & Editor?

saligiayys

Hi team,

I would like to use two input-boxes to pass a username and a date range to PHP. And when I click a button, the DataTable can display the records only for the selected user and the selected date range. And before I click the button, I would like no records or table displayed.

I tried $.fn.dataTable.isDataTable('#tablename'), the codes below, but did not work. The table only displays once ;(
Could you please advise how to implement the function with DataTable & Editor? Thank you and have a wonderful day!

    $("#timesheet-summary-submit").on('click', function () {
        // //selected-user is id in timesheet table in MySQL
        var selectedUser = $("#selected-user").val();
        //summary-calendar-week's value look's like 2022-11-14 to 2022-11-20
        var selectedWeek = $("#summary-calendar-week").val();
        var weekStartDay = selectedWeek.substring(0, 10);
        var weekEndDay = selectedWeek.substring(14, 24);

        //Initialize Monday's Editor & Datatable
        if (!($.fn.dataTable.isDataTable('#timesheet-summary-mon'))) {
            var editorMon = new $.fn.dataTable.Editor({
                ajax: {
                    url: "inc/backend/editor_controllers/timesheetSummaryMon.php",
                    dataType: 'json',
                    type: 'POST',
                    data: function (d) {
                        d.selectedUser = selectedUser;
                        d.weekStartDay = weekStartDay;
                        d.weekEndDay = weekEndDay;
                    }
                },
                table: "#timesheet-summary-mon",
                fields: [{
                    label: "Date:",
                    name: "date",
                }, {
                    label: "Job Number:",
                    name: "job_number"
                }, {
                    label: "Address:",
                    name: "address"
                }, {
                    label: "Start Time:",
                    name: "start_time"
                }, {
                    label: "End Time:",
                    name: "end_time"
                }, {
                    label: "Hours:",
                    name: "hours"
                }
                ]
            });

            //init DataTable when onchange
            var mondayTb = $('#timesheet-summary-mon').DataTable({
                searching: false,
                dom: "Bt",
                // dom: "Bfrtip",
                ajax: {
                    url: "inc/backend/editor_controllers/timesheetSummaryMon.php",
                    dataType: 'json',
                    type: 'POST',
                    data: function (d) {
                        d.selectedUser = selectedUser;
                        d.weekStartDay = weekStartDay;
                        d.weekEndDay = weekEndDay;
                    }
                },
                columns: [
                    { data: "date" },
                    { data: "job_number" },
                    { data: "address" },
                    { data: "start_time" },
                    { data: "end_time" },
                    { data: "hours" }
                ],
                select: true,
                select: 'single',
                buttons: [
                    { extend: "create", editor: editorMon },
                    { extend: "edit", editor: editorMon },
                    { extend: "remove", editor: editorMon }
                ],
                // retrieve: true,
            });

            alert("DataTable");
            //End Initialize Editor & Datatable
        } else {
            mondayTb.ajax.reload();
            alert("No DataTable");
        }
    })

colin

This example from this thread demonstrates how to hide the table until a search is performed. You could do something similar on the click of a button, which then initiates the table search.

And this example from this thread demonstrates how to use a date range filter. You would then combine the two for the single filter on the click,

Colin

saligiayys

Thank you so much for inspiring me! I have implemented the function I need from the great ideas you advised! That is awesome