Converting Ajax MVC call to new API naming convention

davidhcdm

Hello again,

DataTables Debugger:
ucehuw

I am converting working 1.9.4 code to 1.10.2 and am having trouble. I don't have the ajax portion working yet.

I can't set up aDataTables Live or JS fiddle because I'm working with MVC and am not using a stagnant data source...

Here is the working 1.9.4 JS code:

var oSimpleSearchTable;
var oSearchString = "";

oSimpleSearchTable = $('#simpleSearchResult').dataTable({
    "bJQueryUI": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "Home/Search",//sUrl,
    "sServerMethod": "POST",
    "fnServerData": function (url, data, callback, oSettings) {
        data.push({ "name": "searchString", "value": $("#quickSearchInput").val().toString() });
        data.push({ "name": "searchType", "value": $("#radiosearchby :radio:checked").attr('id') });
        data.push({ "name": "baseFilter", "value": $("#radiooptions :radio:checked").attr('id') });
        data.push({ "name": "sort", "value": $("#radiosort :radio:checked").attr('id') });
        oSettings.jqXHR = $.ajax({
            "url": url,
            "data": data,
            "success": callback,
            "contentType": "application/x-www-form-urlencoded; charset=utf-8",//"contentType": "application/json",
            "dataType": "json", 
            "type": "POST",
            "cache": false,
            "error": function (msg) {
                alert(msg.responseText);
            }
        });
    },
    "aoColumns": [
        {
            "sTitle": "<input type='checkbox' id='SimpleSelectAll' />",
            "mData": [0],
            "bSortable": false,
            "mRender": function (data, type, row) {//data, type, full
                return '<input type="checkbox" name="check1" value="' + data + '" class="checkbox-simpletr" />';
            }
        },

...

Here is what I have so far as a conversion:
var oSimpleSearchTable;
var oSearchString = "";

oSimpleSearchTable = $('#simpleSearchResult').DataTable({
    "jQueryUI": true,
    "paging": true,
    "pagingType": "full_numbers",
    "processing": true,
    "serverSide": true,
    "ajax" : {
        url: "Home/Search",
        data: "{ 'searchString': '" + $("#quickSearchInput").val().toString() + "','searchType':  '" + $("#radiosearchby :radio:checked").attr('id') + "','baseFilter': '" + $("#radiooptions :radio:checked").attr('id') + "','sort': '" + $("#radiosort :radio:checked").attr('id') + "'}",
        dataType: "json",
        type: "POST",
        contentType : "application/x-www-form-urlencoded; charset=utf-8",
        cache : false,
        success : callback,
        error: function (msg) {
            alert(msg.responseText);
        }
    },
    "aoColumns": [
        {
            "sTitle": "<input type='checkbox' id='SimpleSelectAll' />",
            "mData": [0],
            "bSortable": false,
            "mRender": function (data, type, row) {//data, type, full
                return '<input type="checkbox" name="check1" value="' + data + '" class="checkbox-simpletr" />';
            }
        },

...

Here is the JS calling the DataTable.Draw() method. I only changed .fnDraw to .draw():

Old Code:

$("#doSearch").click(function (e) {
e.stopImmediatePropagation();
DoSearch();
});
function DoSearch() {
$('.alert').hide(100);
$('#simpleSearchDiv').show();
$('#navSearchDiv').hide();
$('#searchDiv').hide();
var searchstring = $('#quickSearchInput').val();
if (searchstring == '') {
$('#alertmsg').html('Please enter a search term.');
}
else {
oSimpleSearchTable.fnDraw();
$('#myTab a[href="#home"]').tab('show');
}
};

New Code:

$("#doSearch").click(function (e) {
e.stopImmediatePropagation();
DoSearch();
});
function DoSearch() {
$('.alert').hide(100);
$('#simpleSearchDiv').show();
$('#navSearchDiv').hide();
$('#searchDiv').hide();
var searchstring = $('#quickSearchInput').val();
if (searchstring == '') {
$('#alertmsg').html('Please enter a search term.');
}
else {
oSimpleSearchTable.draw();
$('#myTab a[href="#home"]').tab('show');
}
};

When the controller receives the call, none of the parameters are populated with the exception of the datatable parameter itself. Here is the Signature for the Controller Method:

public ActionResult Search(JSDataTable dataTable, string searchString, String searchType, String baseFilter, String sort)

I feel like the ajax portion of the initialization code is wrong. Can you help?

davidhcdm

Help? Almost 2 weeks and no response...

:)

allan

It old style should still work. But if you want to convert it, I would suggest using ajax.data as a function rather than an object. The function is evaluated every time there is an Ajax request, while as object is evaluated only once, when the table is initialised.

In future, if you require urgent help priority support is available.

Allan