How to get ordering working with DataTables using typescript/require

stanggt33 · February 2017

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 · February 2017

where the ordering isn't working.

But

"ordering": false,

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

Allan

stanggt33 · February 2017

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 · February 2017

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 · February 2017

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 · February 2017

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 · February 2017

Thanks Allan!

How to get ordering working with DataTables using typescript/require

How to get ordering working with DataTables using typescript/require

Answers

Howdy, Stranger!

Categories

DataTables

How to get ordering working with DataTables using typescript/require

How to get ordering working with DataTables using typescript/require

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables