Framework
Framework
Button Chart Checkbox / Toggle Confirmation Popover DataTables Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea
Basic Table with Search/Export/Sort
User Request Date Hours Is Approved
HTML
<table class="table table-hover" data-fd="table" id="SIMPLE_TABLE">
	<thead>
		<tr>
			<th fd-for="UserID" fd-for-name></th>
			<th fd-for="RequestDate" fd-for-name></th>
			<th fd-for="Hours" fd-for-name></th>
			<th fd-for="IsApproved" fd-for-name></th>
		</tr>
	</thead>
</table>
JavaScript
(function initializeDataTable() {
    simpleDataTable = $("#SIMPLE_TABLE").DataTable({
        ajax: {
            url: baseUrl + "GetItemList",
            dataSrc: function (result) {
                return result;
            }
        },
        responsive: false,
        searching: true,
        deferRender: true,
        order: [[1, "desc"], [0, "asc"]],
        columns: [
            { data: "userName" },
            {
                data: "requestDate",
                render: function (data) {
                    return moment(data).format('MMMM Do, YYYY');
                }
            },
            { data: "hours" },
            {
                data: "isApproved",
                type: "boolean",
                render: function (data, type, row) {
                    if (type === "sort" || type === "type") {
                        return data;
                    }
                    return '<input type="checkbox" data-fd-control="checkbox"' + (data ? ' checked' : '') + ' disabled /></div>';
                }
            }
        ],
        createdRow: function (row, data) {
            const $row = $(row).attr("data-fd-parentid", data.userId + '_' + data.requestDate);
        },
        drawCallback: function () {
            $("[data-fd='table']").enableControls();
        }
    });
}());
Advanced Table with Edit Controls
Add Item
User Request Date Hours Is Approved
HTML
<form asp-action="CreatePtoRequest" data-ajax="true" data-ajax-complete="FD.Page.UpdatePtoRequest" id="ADD_FORM">
	<div class="card">
		<div class="card-header bg-light">
			Add Item
		</div>
		<div class="card-body row no-gutters">
			
		</div>
		<div class="pb-3 pr-4 row no-gutters justify-content-end">
			<button class="btn btn-outline-primary" type="submit">Add</button>
		</div>
	</div>
</form>

<table class="table table-hover" data-fd="table" id="COMPLEX_TABLE">
	<thead>
		<tr>
			<th fd-for="UserId" fd-for-name></th>
			<th fd-for="RequestDate" fd-for-name></th>
			<th fd-for="Hours" fd-for-name></th>
			<th fd-for="IsApproved" fd-for-name></th>
		</tr>
	</thead>
</table>

<div id="ButtonTemplate" class="d-none">
	<i class="far fa-edit mr-1 btn btn-outline-secondary" data-fd-control="button" data-fd-callback="editRecord"></i>
	<i class="far fa-trash-alt mr-1 btn btn-outline-secondary" data-fd-control="confirmationpopover" data-fd-confirmcallback="removeRecord" data-fd-confirmclass="btn-danger" data-fd-message="Are you sure you want to remove this request?"></i>
</div>
JavaScript
child.removeRecord = function (data) {
    const $row = $("tr[data-fd-parentid='" + data.parentid + "']").addClass("d-none");

    $row.find("[data-fd-confirmcallback=removeRecord]").data().fdControl_confirmationpopover.element.popover("hide"); // force the popover to hide

    $.fdAjax({
        url: baseUrl + "DeletePtoRequest",
        params: complexDataTable.row($row).data(),
        callback: function (result) {
            if (!result.data) {
                $row.removeClass("d-none");
            } else {
                child.dismiss();
            }
        }
    });
};

child.editRecord = function (data) {
    const $row = $("tr[data-fd-parentid='" + data.parentid + "']").addClass("active");

    $.fdAjax({
        url: baseUrl + "GetPtoRequest",
        params: complexDataTable.row($row).data(),
        ishtml: true,
        callback: function (result) {
            if (result.data) {
                addForm.hide();
                addForm.next('form').remove();
                addForm.after(result.data);
                addForm.next('form').enableControls();
            }
        }
    });
}

child.UpdatePtoRequest = function () {
    addForm[0].reset();
    child.dismiss();
    complexDataTable.ajax.reload();
}

child.dismiss = function (data) {
    addForm.show();
    addForm.next('form').remove();
}


(function initializeDataTable() {
    complexDataTable = $("#COMPLEX_TABLE").DataTable({
        ajax: {
            url: baseUrl + "GetItemList",
            dataSrc: function (result) {
                return result;
            }
        },
        responsive: false,
        searching: true,
        deferRender: true,
        order: [[1, "desc"], [0, "asc"]],
        columns: [
            { data: "userName" },
            {
                data: "requestDate",
                render: function (data) {
                    return moment(data).format('MMMM Do, YYYY');
                }
            },
            { data: "hours" },
            {
                data: "isApproved",
                type: "boolean",
                render: function (data, type, row) {
                    if (type === "sort" || type === "type") {
                        return data;
                    }
                    return '<input type="checkbox" data-fd-control="checkbox"' + (data ? ' checked' : '') + ' disabled /></div>';
                }
            },
            {
                data: null,
                defaultContent: buttonTemplate,
                orderable: false,
                searchable: false
            }
        ],
        createdRow: function (row, data) {
            const $row = $(row).attr("data-fd-parentid", data.userId + '_' + data.requestDate);
            if (data.isApproved === true) {
                $("[data-fd-callback=editRecord]", $row).addClass("d-none");
            }
        },
        drawCallback: function () {
            $("[data-fd='table']").enableControls();
        }
    });
}());