Dynamic Enum sorting - How to configure for Ajax data load

Dynamic Enum sorting - How to configure for Ajax data load

galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

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..

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    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();
            }
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • galaxesolutionsgalaxesolutions Posts: 13Questions: 3Answers: 0

    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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    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

  • ThanigaiThanigai Posts: 21Questions: 6Answers: 0

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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

This discussion has been closed.