Jquery DataTables plugin - sAjaxSource

Question

I get my data from the asp.net web service and I was wondering whether there is a way to pass on that data (in json formar straight from the web service) into the DataTables object. I would like to do something like:

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "http://localhost/WebService/GetData",
    } );
} );

Answer 1

Yes you can do that. Is this what you mean?... pass a data to a server?

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php",
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            /* Add some extra data to the sender */
            aoData.push( { "name": "more_data", "value": "my_value" } ); // this line will give additional data to the server...
            $.getJSON( sSource, aoData, function (json) { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */
                fnCallback(json)
            } );
        }
    } );
} );

Answer 2

It is possible provided your web service satisfies DataTables API conventions. Take a look at http://datatables.net/usage/server-side

---

UPDATE

I've used DataTables AjaxSource in my ASP.NET MVC application the way you want - specifying it in the initialization routine. However, my server side was specially designed so that DataTables could speak to it.

Answer 3

I'm working on this right now. I'm using ASP.Net MVC 2 Web Application, using the dataTables religiously, and need to show over 1000 records on each table. Server-Side processing was the way to go for me. Here's what we have.

Here's our declaration in the view (/Admin/Unassigned).

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
    $('#adminUnassignedTable').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Admin/UnassignedTable"
        });
    });
</script>

Here's our controller function (/Admin/UnassignedTable).

public void UnassignedTable()
{
    statusID = (int)PTA.Helpers.Constants.Queue;
    locationID = (int)PTA.Helpers.Constants.Reviewer;
    _AdminList = PTA.Models.IPBRepository.GetIPBsByStatus(Convert.ToInt32(statusID), Convert.ToInt32(locationID)); //_AdminList is an IEnumerable<IPB>, IPB being our class
    IEnumerable<IPB> _NewList;
    int nDisplayStart = Convert.ToInt32(HttpContext.Request.QueryString.Get("iDisplayStart");
    int nDisplayLength = Convert.ToInt32(HttpContext.Request.QueryString.Get("iDisplayLength");
    _NewList = _AdminList.Skip<IPB>(nDisplayStart).Take<IPB>(nDisplayLength).ToList<IPB>();
    string strOutput = "{";
    strOutput += "\"sEcho\":" + HttpContext.Request.QueryString.Get("sEcho") + ", ";
    strOutput += "\"iTotalRecords\":" + _AdminList.Count().ToString() + ", ";
    strOutput += "\"iTotalDisplayRecords\":" + _AdminList.Count().ToString() + ", ";
    strOutput += "\"aaData\":[";
    foreach (IPB ipb in _NewList)
    {
        strOutput += "[ ";
        strOutput += "\"" + ipb.IPBName + "\",";
        strOutput += "\"" + ipb.PubDate + "\",";
        strOutput += "\"" + ipb.Change + "\",";
        strOutput += "\"" + ipb.ChangeDate + "\",";
        strOutput += "\"" + ipb.TotalParts + "\",";
        strOutput += "\"" + ipb.TotalPartsReports + "\",";
        strOutput += "\"" + ipb.ALC + "\",";
        strOutput += "\"" + ipb.DateAdded + "\",";
        strOutput += "\"" + "" + "\","; //Need to add drop down control, that's why it's blank.
        strOutput += "\"" + "" + "\","; //Need to add drop down control, that's why it's blank.
        strOutput += "\"" + "" + "\","; //Need to add drop down control, that's why it's blank.
        strOutput += "\"" + "" + "\""; //Need to add drop down control, that's why it's blank.
        strOutput += "]";
        if (ipb != _NewList.Last())
        {
            strOutput += ", ";
        }
    }
    strOutput += "]}";
    Response.Write(strOutput);
}

NOTE!!!!!!! When adding a control, you must put your quotes for your control values as \\" because the backslash needs to be in the JSON data.

Hopefully, in the controller you can access your webservice. I'm not too familiar with web programming, so I don't know what you'd need to do. I just thought this would help.