Datatable does not sort the field when changed the value locally

Question

Good morning guys,

I’m using Datatable to sort, but when I change the value locally of the status and without posting on the page Datatable seems to ignore my change and sort all the others but what I just changed is not ordered, as if I had never changed the value of that field.

Follow the code below:

Jquery:

function IntanciaGrid() {

    $('#gridTable').DataTable({
        "aoColumnDefs": [
            {
                'bSortable': false,
                'aTargets': [3]
            }
        ],

        "language": {
            "paginate": {
                "next": "Próximo",
                "previous": "Anterior"
            },
            "emptyTable": "Não foi possível encontrar nenhum registro!"
        },

    });
}

This is the status change button:

<button class="btn @(item.Ativo == 0 ? "btn-success" : "btn-danger") btn-xs btnAlteraStatus" type="button" data-id="@item.IdCurso">
    <i class="fa @(item.Ativo == 0 ? "fa-plus-circle" : "fa-minus-circle")"></i>
</button>

Grid:

            <table class="table table-bordered table-hover" id="gridTable">
                <thead style="background-color:#B2DFEE;">
                    <tr>
                        <th class="stf-aligntext" style="width:60%"><b>Cursos Técnicos e/ou FIC</b></th>
                        <th class="stf-aligntext" style="width:15%"><b>Tipo</b></th>
                        <th class="stf-aligntext" style="width:15%"><b>Status</b></th>
                        <th class="stf-aligntext" style="width:10%"><b>Ações</b></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (PronatecDados.DALC.Entities.Curso item in Model)
                    {
                        <tr>
                            <td class="stf-aligntext">@item.NomeCurso</td>
                            <td class="stf-aligntext">@(item.Tipo == 1 ? "Fic" : "Técnico")</td>
                            <td class="stf-aligntext">@(item.Ativo == 1 ? "Ativo" : "Inativo")</td>
                            <td class="stf-aligntext">
                                <a href="@Url.Action("Cadastrar", "CursoProfissionalizante", new {id = @item.IdCurso })" class="btn btn-primary btn-xs">
                                    <i class="fa fa-pencil"></i>
                                </a>&nbsp;
                                <button class="btn @(item.Ativo == 0 ? "btn-success" : "btn-danger") btn-xs btnAlteraStatus" type="button" data-id="@item.IdCurso">
                                    <i class="fa @(item.Ativo == 0 ? "fa-plus-circle" : "fa-minus-circle")"></i>
                                </button>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

I found an example of what I’m trying to do:

I search for Campo Tokyo:

I change the value only in HTML:

He doesn’t order, I need you to order...

Answer 1

Put the "ordering": true in function InstanciaGrid():

function IntanciaGrid() {

    $('#gridTable').DataTable({
        "aoColumnDefs": [
            {
                'bSortable': false,
                'aTargets': [3]
            }
        ],
        //Inclua o ordering
        "ordering": true,
        "language": {
            "paginate": {
                "next": "Próximo",
                "previous": "Anterior"
            },
            "emptyTable": "Não foi possível encontrar nenhum registro!"
        },
    });
}