<!-- 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>
    // 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() {
        $("#EmployeesTable01").dataTable({
            //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: 15,

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

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

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

            //Set column specific initialisation 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: 'id',
                    data: 'id',
                    title: "Employee Id",
                    orderable: true,
                    searchable: false,
                    type: 'num',
                    visible: true
                },
                {
                    //1
                    name: 'givenName',
                    data: "givenName",
                    title: "Given Name",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //2
                    name: 'familyName',
                    data: "familyName",
                    title: "Family Name",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //3
                    name: 'town',
                    data: "town",
                    title: "Town",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //4
                    name: 'country',
                    data: "country",
                    title: "Country",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true,
                    width: "150px",
                    className: 'text-center '
                },
                {
                    //5
                    name: 'email',
                    data: "email",
                    title: "Email",
                    orderable: true,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //6
                    name: 'phoneNo',
                    data: "phoneNo",
                    title: "Phone Number",
                    orderable: false,
                    searchable: true,
                    type: 'string',
                    visible: true
                },
                {
                    //7
                    name: 'actions',
                    data: "actions",
                    title: "Actions",
                    orderable: false,
                    searchable: false,
                    type: 'string',
                    visible: true,
                    render: renderActions
                },
                {
                    //8
                    name: 'urlForEdit',
                    data: "urlForEdit",
                    title: "urlForEdit",
                    orderable: false,
                    searchable: false,
                    type: 'string',
                    visible: false
                }
            ]
        });

        function renderActions(data, type, row, meta) {
            //for Edit button we get Url from the table data
            let html1 =
                '<a class="btn btn-info" href="' +
                row.urlForEdit + '">Edit</a>';

            //for Info button we create Url in JavaScript
            let infoUrl = "@Url.Action("EmployeeInfo", "Home")" +
                "?EmployeeId=" + row.id;
            let html2 =
                '<a class="btn btn-info"  style="margin-left: 10px" href="' +
                infoUrl + '">Info</a>';

            return html1 + html2;
        }
    }
</script>

//HomeController.cs

 //this is target of AJAX call and provides data for
 //the table, based on selected input parameters
 public IActionResult EmployeesDT(DataTables.AspNet.Core.IDataTablesRequest request)
 {
     // There is dependency in this method on names of fields
     // and implied mapping. I see it almost impossible to avoid.
     // At least, in this method, we avoided dependency on the order
     // of table fields, in case order needs to be changed
     //Here are our mapped table columns:
     //Column0 id -> Employee.Id
     //Column1 givenName -> Employee.FirstName
     //Column2 familyName -> Employee.LastName
     //Column3 town -> Employee.City
     //Column4 country -> Employee.Country
     //Column5 email -> Employee.Email
     //Column6 phoneNo -> Employee.Phone
     //Column7 actions 
     //Column8 urlForEdit 

     try
     {
         IQueryable<Employee> employees = MockDatabase.MockDatabase.Instance.EmployeesTable.AsQueryable();

         int totalRecordsCount = employees.Count();

         var iQueryableOfAnonymous = employees.Select(p => new
         {
             id = p.Id,
             givenName = p.FirstName,
             familyName = p.LastName,
             town = p.City,
             country = p.Country,
             email = p.Email,
             phoneNo = p.Phone,
         });

         iQueryableOfAnonymous = FilterRowsPerRequestParameters(iQueryableOfAnonymous, request);

         int filteredRecordsCount = iQueryableOfAnonymous.Count();

         iQueryableOfAnonymous = SortRowsPerRequestParamters(iQueryableOfAnonymous, request);

         iQueryableOfAnonymous = iQueryableOfAnonymous.Skip(request.Start).Take(request.Length);

         var dataPage = iQueryableOfAnonymous.ToList();
         var dataPage2 = dataPage.Select(p => new
         {
             p.id,
             p.givenName,
             p.familyName ,
             p.town ,
             p.country ,
             p.email ,
             p.phoneNo ,
             actions = System.String.Empty,
             urlForEdit = Url.Action("EmployeeEdit", "Home", new { EmployeeId = p.id }),
         }).ToList();

         var response = DataTablesResponse.Create(request, totalRecordsCount, filteredRecordsCount, dataPage2);

         return new DataTablesJsonResult(response, false);
     }
     catch (Exception ex)
     {
         Console.WriteLine(ex.ToString());
         var response = DataTablesResponse.Create(request, "Error processing AJAX call on server side");
         return new DataTablesJsonResult(response, false);
     }
 }