ASP.NET8 using DataTables.net – Part8 – Select rows

//datatables.js

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs5/jszip-3.10.1/pdfmake-0.2.7/dt-2.0.8/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/sl-2.0.3/sr-1.4.1
 *
 * Included libraries:
 *   JSZip 3.10.1, pdfmake 0.2.7, DataTables 2.0.8, Buttons 3.0.2, Column visibility 3.0.2, HTML5 export 3.0.2, Print view 3.0.2, Select 2.0.3, StateRestore 1.4.1
 */

//util1.js

/**
* sends a request to the specified url from a form. this will change the window location.
* @param {string} path the path to send the post request to
* @param {object} params the parameters to add to the url
* @param {string} [method=post] the method to use on the form
*
* Warning: This solution is limited and does not handle arrays or nested objects inside of a form.
*/

function postToUrl1(path, params, method = 'post') {

    // The rest of this code assumes you are not using a library.
    // It can be made less verbose if you use one.
    const form = document.createElement('form');
    form.method = method;
    form.action = path;

    for (const key in params) {
        if (params.hasOwnProperty(key)) {
            const hiddenField = document.createElement('input');
            hiddenField.type = 'hidden';
            hiddenField.name = key;
            hiddenField.value = params[key];

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

//function is used when we need to extract a list of a given property
//extract values from an array of objects based on a specific key
function PluckUtil1(array, key) {
    return array.map(function (obj) {
        return obj[key];
    });
}

<!-- Employees.cshtml -->
<partial name="_LoadingDatatablesJsAndCss" />

@{
    <div class="text-center">
        <h3 class="display-4">Employees table</h3>
    </div>

    <!-- Here is our table HTML element defined. JavaScript library Datatables
    will do all the magic to turn it into interactive component -->
    <table id="EmployeesTable01" class="table table-striped table-bordered ">
    </table>
}

<script src="~/lib/JSUtil/util1.js" asp-append-version="true"></script>

<script>
    // Datatables script initialization=========================================
    // we used defer attribute on jQuery so it might not be available at this point
    // so we go for vanilla JS event

    document.addEventListener("DOMContentLoaded", InitializeDatatable);

    function InitializeDatatable() {
        let myTable = new DataTable("#EmployeesTable01", {
            //processing-Feature control the processing indicator.
            processing: true,
            //paging-Enable or disable table pagination.
            paging: true,
            //info-Feature control table information display field
            info: true,
            //ordering-Feature control ordering (sorting) abilities in DataTables.
            ordering: true,
            //searching-Feature control search (filtering) abilities
            searching: true,
            //search.return-Enable / disable DataTables' search on return.
            search: {
                return: true
            },
            //autoWidth-Feature control DataTables' smart column width handling.
            autoWidth: true,
            //lengthMenu-Change the options in the page length select list.
            lengthMenu: [10, 15, 25, 50, 100],
            //pageLength-Change the initial page length (number of rows per page)
            pageLength: 10,

            //order-Initial order (sort) to apply to the table.
            order: [[2, 'asc']],

            //serverSide-Feature control DataTables' server-side processing mode.
            serverSide: true,

            //Select extension
            select: {
                style: 'os',
                selector: 'td:first-child',
                headerCheckbox: 'select-page'
            },

            //Load data for the table's content from an Ajax source.
            ajax: {
                "url": "@Url.Action("EmployeesDT", "Home")",
                "type": "POST",
                "datatype": "json"
            },

            //Set column specific initialization properties
            columns: [
                //name-Set a descriptive name for a column
                //data-Set the data source for the column from the rows data object / array
                //title-Set the column title
                //orderable-Enable or disable ordering on this column
                //searchable-Enable or disable search on the data in this column
                //type-Set the column type - used for filtering and sorting string processing
                //visible-Enable or disable the display of this column.
                //width-Column width assignment.
                //render-Render (process) the data for use in the table.
                //className-Class to assign to each cell in the column.

                {   //0
                    name: 'selectCheckbox',
                    //data: 'selectCheckbox',
                    //title: "",
                    orderable: false,
                    //searchable: false,
                    //type: 'num',
                    //visible: true,
                    render: DataTable.render.select(),
                    width: "50px",
                },
                {   //1
                    name: 'id',
                    data: 'id',
                    title: "Employee Id",
                    orderable: false,
                    searchable: false,
                    type: 'num',
                    visible: true
                },
                {
                    //2
                    name: 'givenName',
                    data: "givenName",
                    title: "Given Name",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //3
                    name: 'familyName',
                    data: "familyName",
                    title: "Family Name",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //4
                    name: 'town',
                    data: "town",
                    title: "Town",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //5
                    name: 'country',
                    data: "country",
                    title: "Country",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true,
                    width: "150px",
                    className: 'text-center '
                },
                {
                    //6
                    name: 'email',
                    data: "email",
                    title: "Email",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //7
                    name: 'phoneNo',
                    data: "phoneNo",
                    title: "Phone Number",
                    orderable: false,
                    searchable: true,
                    type: 'string',
                    visible: true
                }
            ],
            layout: {
                top1Start: {
                    buttons:
                        [
                            'selectNone',
                            'selectAll',
                            {
                                extend: 'selected',
                                text: 'Show selected data',
                                action: function () {
                                    let myRows = myTable.rows({ selected: true });
                                    let data = myRows.data();
                                    let ids = PluckUtil1(data, 'id');
                                    let idsString = ids.toArray().join(',');

                                    alert('Selected:' + idsString);
                                }
                            },
                            {
                                text: 'Deselect all2',
                                action: function () {
                                    let myRows = myTable.rows({ selected: true });
                                    myRows.deselect();
                                }
                            },
                            {
                                extend: 'selected',
                                text: 'Action with selected data',
                                action: function () {
                                    let myRows = myTable.rows({ selected: true });
                                    let data = myRows.data();
                                    let ids = PluckUtil1(data, 'id');
                                    let idsString = ids.toArray().join(',');

                                    //let SelectedEmployeesUrl = "@Url.Action("SelectedEmployees", "Home")" +
                                    //    "?SelectedIds=" + idsString;
                                    //redirect to another page
                                    //window.location.replace(SelectedEmployeesUrl);

                                    postToUrl1("@Url.Action("SelectedEmployees", "Home")", { SelectedIds: idsString });
                                }
                            },
                        ]
                }
            }
        });
    }

</script>

//SelectedEmployeesVM.cs
namespace Example08.Models.Home
{
    public class SelectedEmployeesVM
    {
        //model
        public string? SelectedIds { get; set; } = null;
        //view model
        public List<string>? SelectedIdsList { get; set; } = null;
    }
}

//HomeController.cs
public IActionResult SelectedEmployees(SelectedEmployeesVM model)
{
    model.SelectedIds = model.SelectedIds?.Trim();
    if (model.SelectedIds != null)
    {
        string[] strings = model.SelectedIds.Split(',');
        model.SelectedIdsList = new List<string>(strings);
    }
    return View(model);
}