columnFilter not using Datatables/Pipeline Ajax URL in MVC5 View

rwkiii

I'm using MVC5/razor with Datatables server-side processing and pipeline caching. This combination is working good, though I'm not completely finished with the backend. The URL for the View is /Admin/Selections. Of course, this is a GET Controller Action. It basically does nothing but return View(); The Datatables Ajax POST URL is /Admin/GetSelections

I am also using fnSetFilteringDelay() and this too is working with Datatables search field.

With respect to Datatables and Pipeline, my configuration is working. I can see that Pipeline is caching 10 pages that are returned by /Admin/GetSelections. Pagination buttons work. Column sorting triggers a call to /Admin/GetSelections, etc.

PROBLEM #1: I have 3 checkboxes on this View. Their true/false values get passed in the jQuery Ajax POST to /Admin/GetSelections/ when the View is first loaded. This works fine when the View is initially loaded, but I can't figure out how to submit their values via submit button and perform a new filter after they've been changed.

PROBLEM #2: I am trying to implement columnFilter functionality via external form fields as in this example:

    http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html

But whenever I type a character in one of these external form fields a call is made to the View's GET Controller Action of /Admin/Selections - instead of making an Ajax POST to /Admin/GetSelections. Also, fnSetFilteringDelay() is being ignored by these external columnFilter form fields. So, it seems that columnFilter is ignoring all of my Datatables initialization settings - pipeline, filtering delay, etc.

My questions are:

1) How do I configure jQuery event to allow button btnFilter (below) to perform a new Ajax POST to /Admin/GetSelections and redraw the Datatables?

2) What am I doing wrong or not including in order to get columnFilter to utilize fnSetFilteringDelay() and $.fn.dataTable.pipeline() functionalities?

In the View:

        <div class="form-group">
            <div class="col-md-3">
                <label>Filter</label>
            </div>

            <div class="col-md-4">
                <div class="checkbox">
                    <label class="control-label">Customer selections only</label>
                </div>
                <div class="checkbox">
                    <label class="control-label"><input id="UserSavedSelectionsOnly" name="UserSavedSelectionsOnly" type="checkbox" value="true"></label>
                </div>
                <div class="checkbox">
                    <label class="control-label"><input id="Last30DaysOnly" name="Last30DaysOnly" type="checkbox" value="true"></label>
                </div>
            </div>

            <div class="col-md-2">
                <input id="btnFilter" type="submit" value="Go" class="btn btn-default" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-3">
                <label>sSelectionId</label>
            </div>
            <div class="col-md-4">
                <div id="sSelectionId"></div>
            </div>
        </div>

 
        <table id="selectionstable" class="stripe hover compact order-column">
            <thead><tr><th class="">Sel ID</th></tr></thead>
            <tbody></tbody>
            <tfoot><tr><td></td></tr></tfoot>
        </table>

The jQuery:

    <script type="text/javascript">
        usTable = null;

         jQuery(document).ready(function () {

            usTable = $('#selectionstable').dataTable({
                dom: "lftrip",
                "bServerSide": true,
                "bProcessing": true,
                "scrollY": "318px",
                "scrollX": false,
                "scrollCollapse": false,
                "paging": true,
                "ordering": true,
                "iDisplayLength": 10,
                "sPaginationType": "full_numbers",
                "sServerMethod": "POST",
                "ajax": $.fn.dataTable.pipeline({
                    url: '/Admin/GetSelections/',
                    pages: 10,         // number of pages to cache
                    type: "POST",
                    dataType: "json",
                    data: {
                        UserSavedSelectionsOnly: $('#UserSavedSelectionsOnly').is(':checked'),
                        Last30DaysOnly: $('#Last30DaysOnly').is(':checked')
                    }
                }),

                "oLanguage": {
                    "sEmptyTable": "Selections Not Found."
                },
                "aoColumns": [
                    {
                        "sName": "SelectionId",
                        "bSearchable": false,
                        "bSortable": true,
                        "width": "45px",
                        "className": "text-left"
                    }
                ]
            })
            .columnFilter({
                //sPlaceHolder: "head:before",
                aoColumns: [
                    { sSelector: "#sSelectionId", type: "text" }
                ]
            })
            .fnSetFilteringDelay();
        })
    </script>

rwkiii

Btw, I've asked my client to authorize payment toward the Datatables project and it was approved quickly. It's a big company and my experience with them is that it takes a few weeks before payments are submitted...