DataTables 1.10.4 and Server Side Processing

Dome · February 2015

Hello eveyone, it's already 2 days I am trying to sort a problem out, but I am not able to.

I am trying to use the new version of the dataTables, getting data from an asp.net webservice (VB). This is my HTML:

 <div class="container">
        <table class="table table-hover" id="liveTransactionTable">
            <thead>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

This is my Javascript:

 $(document).ready(function () {
            $('#liveTransactionTable').dataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: 'liveTransactions.aspx/getData',
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8"
                },
                "columns": [
                 { "title": "masterProduct", "width": "160px", "className": "left", "orderable": true }]
            });
 });

This is my web service:

<System.Web.Services.WebMethod()> _
  <ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=True)> _
    Public Shared Function getData() As String
        Dim BIZTransaction As New Business.Transaction
        Dim transactionParameters As New Model.transactionSearchParameters
        Dim Transactions As List(Of Model.Transaction) = BIZTransaction.getLiveTransactions(transactionParameters)

        Dim liveTransactions As New liveTransactions
        Return liveTransactions.generateDataTables(Transactions)

    End Function
    Private Function generateDataTables(Transactions As List(Of Model.Transaction)) As String
        '' Generate the dataTable to be shown.
        Dim html As String = ""

        ' DataTables data.
        Dim dataArray(Transactions.Count - 1) As Object
        For Each Transaction As Model.Transaction In Transactions
            dataArray(Transactions.IndexOf(Transaction)) = New With {
                    .masterProduct = Transaction.masterProduct.Code}
        Next

        ' DataTables header.
        Dim jSonArray(0) As Object
        jSonArray(0) = New With {Key .sEcho = HttpContext.Current.Request.Params("sEcho"), Key .iTotalRecords = Transactions.Count, Key .iTotalDisplayRecords = Transactions.Count, Key .data = dataArray}

        Dim serializer As New JavaScriptSerializer()
        Return serializer.Serialize(jSonArray).ToString

    End Function

It's not working. Getting different errors. Can anyone help me please?

I know I am mixing versions, but I am jst trying...

Thanks,
D.

tangerine · February 2015

It's not working. Getting different errors.

Explaining in what way it's not working, and describing the errors, would be helpful.

Dome · February 2015

OK.With that code, in Chrome, I am getting:

Uncaught TypeError: Cannot read property 'length' of undefined

D.

Dome · February 2015

Hi again,
I modified the javascript that now looks like:

            $('#liveTransactionTable').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {             
                    type: "GET",
                    url: "liveTransactions.aspx/getData",
                    contentType: "application/json; charset=utf-8",
                    "dataSrc": function (json) {
                        if (json.hasOwnProperty("d")) { json = json.d; }
                        data = $.parseJSON(json);
                        alert(data.recordsTotal)
                        return data;
                    }
                },
                "columns": [
                    { "data": "masterProduct" },
                    { "data": "b2" },
                    { "data": "b3" },
                    { "data": "b4" },
                    { "data": "b5" }
                ]
            });
        });

The alert here (alert(data.recordsTotal)) shows the right recordsTotal, but then the table is empty, I got something like:

No matching records found
Showing 0 to 0 of 0 entries (filtered from NaN total entries)

Please help...

D.

Dome · February 2015

Getting there...

  $('#liveTransactionTable').dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {             
                    type: "GET",
                    url: "liveTransactions.aspx/getData",
                    contentType: "application/json; charset=utf-8",
                    "dataSrc": function (json) {
                        var jSonD = json.hasOwnProperty("d") ? json.d : json;
                        jSonD = $.parseJSON(jSonD);

                      var o = {
                            recordsTotal: jSonD.recordsTotal,
                            recordsFiltered: jSonD.recordsFiltered,
                            data: jSonD.data
                        };

                        return o.data;
                    }
                },
                "columns": [
                    { "data": "masterProduct" },
                    { "data": "b2" },
                    { "data": "b3" },
                    { "data": "b4" },
                    { "data": "b5" }
                ]
            });

Now data are shown, but still no recordsTotal or recordsFiltered... why?

D.

Dome · February 2015

Hi, I solved it.

This way:

 $('#liveTransactionTable').dataTable({
                "processing": true,
                "serverSide": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        type: "GET",
                        url: "liveTransactions.aspx/getData",
                        contentType: "application/json; charset=utf-8",
                        data: "{'foo':'foovalue', 'bar':'barvalue'}",
                        dataType: "json",
                        "success": function (json) {
                            /* Remove extra "d" root. */
                            json = json.hasOwnProperty("d") ? json.d : json;
                            var jSonD = $.parseJSON(json);

                            fnCallback(jSonD);
                        }
                    });
                },
                "columns": [
                    { "data": "masterProduct" },
                    { "data": "b2" },
                    { "data": "b3" },
                    { "data": "b4" },
                    { "data": "b5" }
                ]
            });

Regards,
D.

DataTables 1.10.4 and Server Side Processing

DataTables 1.10.4 and Server Side Processing

Replies

Howdy, Stranger!

Categories

DataTables

DataTables 1.10.4 and Server Side Processing

DataTables 1.10.4 and Server Side Processing

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables