How to get ordering working with DataTables using typescript/require

stanggt33

Hey everyone and thanks in advance for any help you can provide.

I'm using DataTables with typescript and require. I've run into an issue where the ordering isn't working. When I take it out of typescript and require and just use it with normal JS, the ordering works fine with identical code. Any idea what could be causing this?

This is the typing file Im using
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery.datatables/index.d.ts

And here is the code

requirejs(["/Weblink2/Scripts/plugins/datatables.js"], function (datatables) {
    $.extend(true, $.fn.dataTable.defaults, {
        "paging": false,
        "ordering": false,
        "info": false,
        "searching": false,
        "processing": true,
        "serverSide": true,
        language: {
            processing: loadingMarkup,
        }
    });

    $('#EinTable').DataTable({
        "ajax": "/weblink2/MaintenanceSupport/MyAccount/ManageProvidersDataTables?idType=E",
        "columns": [
            {
                "title": "Proivider Name", data: function (data) {
                    if (data.Entitytype == null) {
                        return "<strong>" + data.ProviderName + "</strong>"
                    }
                    else {
                        return data.ProviderName
                    }
                }
            },
            { "title": "ID", "data": "Id" },
            {
                "title": "Entity Type", data: function (data) {
                    if (data.Entitytype == 2) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' selected='selected'>Group</option>\
                            <option value='1' >Individual</option>\
                        </select>"
                    }

                    else if (data.Entitytype == 0 || data.Entitytype == 1) {
                        return "<select id='Entitytype' name='Entitytype' class='form-control'>\
                            <option value='2' >Group</option>\
                            <option value='1' selected='selected' >Individual</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Entitytype' name='Entitytype' class='form-control input-validation-error'>\
                            <option value='' selected='selected' ></option>\
                            <option value='2' >Group</option>\
                            <option value='1'  >Individual</option>\
                        </select>" }
                }
            },
            {
                "title": "Active Status", data: function (data) {
                    if (data.Active == 1) {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' selected='selected'>Active</option>\
                            <option value='2' >Inactive</option>\
                        </select>"
                    }
                    else {
                        return "<select id='Active' name='Active' class='form-control'>\
                            <option value='1' >Active</option>\
                            <option value='2' selected='selected' >Inactive</option>\
                        </select>"
                    }
                }
            }
        ],
        "columnDefs": [
            { "width": "40%", "targets": 0 },
            { "width": "20%", "targets": 1 },
            { "width": "20%", "targets": 2 },
            { "width": "20%", "targets": 3 }
        ],
        "order": [0, "asc"]
    });

allan

where the ordering isn't working.

But

"ordering": false,

Ordering isn't working because you've disabled it .

Allan

stanggt33

Sorry, I meant to change that. I guess I pasted older code. Even when I have that set to true it won't work. When I click the TH's to change the order nothing happens.

allan

No problem. So we move on to the server-side processing script in that case. You have serverSide enabled, which means that its up to your ManageProvidersDataTables?idType=E script to do the ordering. What code does it have for that?

Allan

stanggt33

The part that has be baffled is how it works fine without using typescript.

The ajax route hits this controller action

        [HttpGet]
        public ActionResult ManageProvidersDataTables([ModelBinder(typeof(DataTableModelBinder))] DataTableSettingsVM parameterviewmodel, string idType)
        {
            var service = _serviceFactory.CreateMyAccountDataService(UserSettings);

            var json = service.GetProviders(idType).ConvertToNewDatatables(parameterviewmodel.Draw);

            return Json(json, JsonRequestBehavior.AllowGet);
        }

And here is the data service it will eventually hit in the repo

       public List<ManageProvidersDto> GetMyManageProvidersData(string terminalId, string idType)
        {
            using (var db = GetDbContext())
            {
                var result = db.Providers.Where(z => z.Terminal == terminalId && z.Id.StartsWith(idType)).Select(p => new ManageProvidersDto
                {
                    Id = p.Id,
                    ProviderName = p.Name,
                    Entitytype = p.EntityType,
                    Status = p.Status,
                    Active = p.Active
                }).ToList();

                return result;
            }
        }

allan

Thanks. I don't see anything there that will actually perform the server-side processing actions.

Unless you actually need server-side processing, I would suggest you disable it.

Allan

stanggt33

Thanks Allan!