columnFilter not using Datatables/Pipeline Ajax URL in MVC5 View
columnFilter not using Datatables/Pipeline Ajax URL in MVC5 View
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>
Replies
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...