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

Here you can find one article about using DataTables with ASP.NET MVC Integrating jQuery DataTables with ASP.NET MVC.

Hope this could help you. There are few thing that can help you (model class for accessing DataTables parameters and class for direct serialization int the JSON). It makes code little bit cleaner.

Regards

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.

Answer 4

Yes.

Create an object that would store the Datatables data in the correct format. I used a structure:

Public Structure DatatablesObject
    Public sEcho As Integer
    Public iTotalRecords As Integer
    Public iTotalDisplayRecords As Integer
    Public aaData As List(Of List(Of String))
End Structure

We actually created our own Serializer for this, but the concept is the same. Loop through your data source and populate the object, then serialize it and respond:

Dim ser As New JavascriptSerializer
Dim obj As New DatatablesObject With {.sEcho = {Passed In}, .iTotalRecords = {Passed In}, .iTotalDisplayRecords = {Passed In}}
            Dim container As New List(Of List(Of String))
            If value IsNot Nothing Then
                For Each dr As DataRow In value.Rows
                    Dim list As New List(Of String)
                        For Each dc As DataColumn In dr.Table.Columns
                            list.Add(If(dr(dc.ColumnName) Is DBNull.Value, String.Empty, "" & dr(dc.ColumnName) & ""))
                        Next
                    container.Add(list)
                Next
            End If
            obj.aaData = container
            Response.Cache.SetCacheability(HttpCacheability.NoCache)
            Response.ContentType = "application/json"
            Response.Write(ser.Serialize(obj))

That should serialize to the exact format you need. If you need to add data in a specific order, then you'll need to modify the loop. Keep in mind that the {Passed In} is the values being passed into a function or directly assigned to those variables from the request.

Answer 5

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 6

I ended up composing the table by myself. It suffices for my purposes that are fairly minimal now.