I have ASP.NET Code that use JS for datatable for views. And i do some repetiting code because i have 3 tables (in this case) that i have same columns. just the data(json) that different i have got from controller.

Here's the JS Code

<script type="text/javascript">

    function parseDate(date) {
        if (!date) {
            return ""
        }
        return new Date(parseInt(date.substr(6))).toLocaleString();
    }

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });

                $("#getAllToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });

        $("#getAll_wrapper").addClass("w-100");

    });

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllSentByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data?.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });


                $("#getAllSentToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });
    });

    $(document).ready(function() {
        $.ajax({
            "url": "@Url.Action("GetAllFailedByUserToday", "Dashboard")",
            "type": "GET",
            "datatype": "json",
            "success": function(res) {
                const mapped = res.data.map((dt) => {
                    return {
                        ...dt,
                        CreatedDate: parseDate(dt.CreatedDate),
                        Status: dt.Status ? "Sukses" : "Gagal",
                        IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                    };
                });

                $("#getAllFailedToday").DataTable({
                    "data": mapped,
                    "dom": 'Bfrtip',
                    "buttons": ['copy', 'excel'],
                    "columns": [
                        { "data": "Nama" },
                        { "data": "NoHP" },
                        { "data": "Content" },
                        { "data": "Sender" },
                        { "data": "IsUsingTemplate" },
                        { "data": "Status" },
                        { "data": "CreatedDate" }
                    ],
                    columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                    order: [0, 'desc'],
                });
            }
        });


    });

</script>

Can I reduce the repetition for these code. If can, please help me. So I can try to apply for another page that has same issue. Thank you.

CodePudding user response：

Update, suggestion from @Roamer-1888 finally I try this and it works!

function renderTable(action, tableId) {
    $.ajax({
        "url": action,
        "type": "GET",
        "datatype": "json",
        "success": function(res) {
            const mapped = res.data.map((dt) => {
                return {
                    ...dt,
                    CreatedDate: parseDate(dt.CreatedDate),
                    Status: dt.Status ? "Sukses" : "Gagal",
                    IsUsingTemplate: dt.IsUsingTemplate ? "Ya" : "Tidak"
                };
            });

            $(tableId).DataTable({
                "responsive": true,
                "lengthChange": false,
                "autoWidth": false,
                "data": mapped,
                "dom": 'Bfrtip',
                "buttons": ['copy', 'excel'],
                "columns": [
                    { "data": "Nama" },
                    { "data": "NoHP" },
                    { "data": "Content" },
                    { "data": "Sender" },
                    { "data": "IsUsingTemplate" },
                    { "data": "Status" },
                    { "data": "CreatedDate" }
                ],
                columnDefs: [{ 'targets': 0, type: 'date-euro' }],
                order: [0, 'desc'],
            });

        }
    });
}

$(document).ready(function() {
    renderTable("@Url.Action("GetAllByUser", "Dashboard")", "#getByUser")
    renderTable("@Url.Action("GetAllSentByUser", "Dashboard")", "#getSentByUser")
    renderTable("@Url.Action("GetAllFailedByUser", "Dashboard")","getFailedByUser")
});