Dynamic Enum sorting - How to configure for Ajax data load

galaxesolutions

I am using enum sorting as per the instructions mentioned in this post https://datatables.net/blog/2016-06-16.

But this works only if my html table has static data. My code currently contains only table headers and I load the data using ajax url load. Kindly let me know how to configure for making this plugin work.

My sample code:

$.fn.dataTable.enum(['High', 'Medium', 'Low']);
    table = $('#tblRisks').DataTable({
        //dom: "Bfrtip",
        ajax: "/Risk/GetRisks",
        defaultRender: false,
        columns: [

and so on..

allan

Hi,

I've just put this example together which uses Ajax loading with the enum plug-in and it appears to work okay: http://live.datatables.net/vahaqevi/1/edit .

Can you give me a link to your page so I can debug it and see why it isn't working please?

Thanks,
Allan

galaxesolutions

My page is hosted internally, so not able to provide you immediately.
Meanwhile, you are loading from text file but I am loading JSON data returned from remote server call. Not sure both are considered same.

Pasting few more lines of code:

{
                    data: "Risk.ContingencyPlan", className: 'editable', defaultContent: "",
                    "render": function(data, type, full, meta)
                    {
                        return (full.Risk.ContingencyPlan == null || full.Risk.ContingencyPlan == undefined)
                            ? "" : MultiLineHtmlEncode(full.Risk.ContingencyPlan);
                    }
                }
            ],
            "columnDefs": [
               { "className": "text-center", "targets": "_all" },
               { "orderable": false, "targets": [0, 1] }
            ],
            "order": [2, 'desc'],
            "searching": true,
            "paging": true,
            "bInfo": true,
            "scrollX": true,
            "bAutoWidth": true,
            "processing": false,
            "bDeferRender": true,
            "oLanguage": {
                "sSearch": "Search : "
            },
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                $(nRow).addClass('gvRowLeftAlligned');
                return nRow;
            },
            "iDisplayLength": 2,
            "aLengthMenu": [[2, 5, 8, 10, 20], [2, 5, 8, 10, 20]]
        });

Server code [.NET MVC Controller]:

[Route("Risk/GetRisks")]
        [HttpGet]
        public string GetRisks(int RiskID = 0)
        {
            var response = GetAllRisks(RiskID);

            var json = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(response);
            return json.ToString();
        }

allan

Are you able to use the DataTables debugger on your page and give me a link to the debug trace that it produces?

My current guess is that the enum options aren't exactly matching the data that is available.

Thanks,
Allan

galaxesolutions

Please fine below:

https://debug.datatables.net/egolik

allan

None of the columns appear to be using the enum sorting. Can you tell me:

1. Which column is it that should be using the enum?
2. The code your are using to define the enum.

Based on the trace I think my original guess still stands - there is data in the column which is not matching the options provided in the enum.

Thanks,
Allan

galaxesolutions

For static table, the only thing I did to make the enum sort work is to add below line before creating the datatable:

$.fn.dataTable.enum(['High', 'Medium', 'Low']);

It worked, Hence I followed the same for my page. When you say none of the column appear to be using enum soring, could you tell me if I have to configure any column as enum type. I had tried that as well.

Columns Risk.RiskImpactValue & Risk.LikelihoodofOccurrenceValue display only Low/Medium/High
Please note that when user clicks a cell, they are rendered as select dropdown in editor.

allan

That should be all you need to do as you will be able to see in the example I made above.

The problem is that you have explicitly set the columns.type option for these columns: "type": "select". The result is that the auto type detection is overruled with your custom type. I would suggest removing the use of type in your column definitions.

Allan

Thanigai

This plugin doesn't seem to work with IE8. Could you please provide a fix..

allan

@Thanigai - Please don't post duplicates. You have a thread for this already open.