Filter table from HTML option elsewhere on page.

rdm

In this scenario, I have an HTML dropdown apart from the editor table.

What I'd like to be able to do is apply a dropdown-filter like this:

$("#ReconciledFilter").change(function() {
    // reload editor, reading parameter value from this html option.
});

I've tried, without success, editor.ajax.reload().

What do I need to do differently?

The overall structure looks like this..

var editor;
$(() => {            

    editor = new $.fn.dataTable.Editor({
        ajax: "@Url.Action("EditorTable")",
        table: "#example",
        fields: [
            /*  more fields ...*/
            {
                label: "Reconciled",
                name: "Reconciled",
                type: "checkbox",
                separator: "|",
                unselectedValue: 0,
                options: [
                    { label: '', value: 1 }
                ]
            }
            /*  more fields ...*/
        ]
    });

    $('#example').DataTable(dataTableConfig);

    var dataTableConfig = {
        dom: "Blftipr",
        buttons: ['excelHtml5', 'print'],
        ajax: {
            url: "@Url.Action("EditorTable")",
            data: {
                campus: "@Model.Campus",
                reconciled: $("#ReconciledFilter").val()
            },
            type: "POST"
        },
        paging: false,
        serverSide: true,
        deferRender: true,
        scrollCollapse: true,                
        columns:
        [
            /*  more fields ...*/
            {
                data: "Reconciled",
                render: function(data, type, row) {
                    if (type === 'display') {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }
            /*  more fields ...*/
        ],
        rowCallback: function(row, data) {
            $('input.editor-active', row).prop('checked', data.Reconciled == 1);
        }
    };           


    $('#example').on('change',
        'input.editor-active',
        function() {
            editor.edit($(this).closest('tr'), false)
                .set('Reconciled', $(this).prop('checked') ? 1 : 0)
                .submit();
        });
});

allan

ajax.reload() is a DataTable API method, not Editor. You probably got a message saying it was an unknown function when calling it on the Editor instance. Change it to the DataTable instance (which isn't shown above) and it should work.

Allan

rdm

I tried both iterations, and it did not work.

// iteration 1: no change to table
$("#Reconciled").change(function () {
    var table = $("#example").DataTable();
    table.ajax.reload();
});

// iteration 2:
// error: cannot reinitialize table.
// added `destroy:true` to dataTableConfig
// no change to table

$("#Reconciled").change(function () {
    var table = $("#example").DataTable(dataTableConfig);
    table.ajax.reload();
});

rdm

I've given up this approach and resorted to a different approach. Showing the Razor code too in case someone shares my scenario (i.e., using .NET MVC 5 and trying to do something similar).

It's not an elegant approach and requires more page loads depending on how the user uses the View, but it works.

1. Declare Reconciled as a variable in my C# ViewModel and submit the form to (re)load the View with the intended parameters.

   @using (Html.BeginForm("Index", "ReconcileSummaryStudentsStillAbsents", FormMethod.Get)) { <p style="display: inline-block">Campus: @Html.DropDownListFor(m => m.Campus, Model.CampusList)</p> <p style="display: inline-block">Reconciled: @Html.DropDownListFor(m => m.Reconciled, Model.ReconciledList)</p> <input type="submit" value="submit" id="SubmitButton" /> }

2. When the View loads after form submit, the editor is called with the intended parameters.

   var dataTableConfig = { dom: "Blftipr", ajax: { url: "@Url.Action("EditorTable")", data: { campus: "@Model.Campus", reconciled: $("#Reconciled").val() }, type: "POST" }, serverSide: true,

And now I'm able to see the desired records after changing a dropdown value.