1

The problems is Datatables JS stays in state "processing" and the Chrome debug throws:

Uncaught TypeError: Cannot read property 'length' of undefined

The code in question that "feeds" datatables js is (data is some linq query):

var jsonData = Json(data);

return jsonData;

The response is (textual response):

    [{
    "TotalCredito": 1649112940.000000,
    "TotalClientes": 1040,
    "Balance7": 188974066.000000,
    "Balance37": 25152742.000000,
    "Balance67": 53268069.000000,
    "Mes": 1
}, {
    "TotalCredito": 1910576150.000000,
    "TotalClientes": 941,
    "Balance7": 332301396.000000,
    "Balance37": 84407873.000000,
    "Balance67": -7053061.000000,
    "Mes": 2
}, {
    "TotalCredito": 1852843443.000000,
    "TotalClientes": 809,
    "Balance7": 300589569.000000,
    "Balance37": 87170595.000000,
    "Balance67": 41900708.000000,
    "Mes": 3
}, {
    "TotalCredito": 1736522626.000000,
    "TotalClientes": 747,
    "Balance7": 235758479.000000,
    "Balance37": 107699635.000000,
    "Balance67": 60831390.000000,
    "Mes": 4
}, {
    "TotalCredito": 1611546395.000000,
    "TotalClientes": 702,
    "Balance7": 201209547.000000,
    "Balance37": 59028449.000000,
    "Balance67": 64171607.000000,
    "Mes": 5
}, {
    "TotalCredito": 1306131513.000000,
    "TotalClientes": 697,
    "Balance7": 552835099.000000,
    "Balance37": 67349028.000000,
    "Balance67": 50490441.000000,
    "Mes": 6
}]

And the script function in the view is:

<script>
$(document).ready(function () {
    var datatable = $('#informe').dataTable({
        "language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
        "bFilter": false,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "somesupercoolurl",
            "type": "POST",
            "dataType": "json"
        },
        "columns": [
            { "data": "Balance7" },
            { "data": "Balance37" },
            { "data": "Balance67" },
            { "data": "Mes" },
            { "data": "TotalClientes" },
            { "data": "TotalCredito" }
        ],            
    });
});

Finally, the table is:

<table id="informe">
        <thead>
            <tr>
                <th>Balance7</th>
                <th>Balance37</th>
                <th>Balance67</th>
                <th>Mes</th>
                <th>TotalClientes</th>
                <th>TotalCredito</th>
            </tr>
        </thead>        
    </table>

I find it strange that while the information is properly formatted, is not able to process.

3
  • Maybe you are missing some code? I don't see length anywhere in your code. Are you using that anywhere? Commented Jul 30, 2014 at 20:19
  • i dont use length, how implement that? Commented Jul 30, 2014 at 21:00
  • I think it's possible somesupercoolurl is not returning what you think it is. Have you considered checking the Network tab in chrome debug to see what is being returned? It's possible that the code could complain about length if the response from the server is empty Commented Jul 31, 2014 at 15:04

1 Answer 1

2

Finally, i resolve this

after seeing many examples, I noticed it's necessary include this 3 variables to json before parse the json object to datatables js; In the controller:

var totalDatos = data.Count();
var jsonData = Json(new {
    iTotalDisplayRecords = totalDatos,
    iTotalRecords = totalDatos,
    aaData = data
});
return jsonData;

Whit this 'function', the json object is like this

{"iTotalDisplayRecords":6,"iTotalRecords":6,"aaData":[{"TotalCredito":1649112940.000000,"TotalClientes":1040,"Balance7":188974066.000000,"Balance37":25152742.000000,"Balance67":53268069.000000,"Mes":1},{"TotalCredito":1910576150.000000,"TotalClientes":941,"Balance7":332301396.000000,"Balance37":84407873.000000,"Balance67":-7053061.000000,"Mes":2},{"TotalCredito":1852843443.000000,"TotalClientes":809,"Balance7":300589569.000000,"Balance37":87170595.000000,"Balance67":41900708.000000,"Mes":3},{"TotalCredito":1736522626.000000,"TotalClientes":747,"Balance7":235758479.000000,"Balance37":107699635.000000,"Balance67":60831390.000000,"Mes":4},{"TotalCredito":1611546395.000000,"TotalClientes":702,"Balance7":201209547.000000,"Balance37":59028449.000000,"Balance67":64171607.000000,"Mes":5},{"TotalCredito":1306131513.000000,"TotalClientes":697,"Balance7":552835099.000000,"Balance37":67349028.000000,"Balance67":50490441.000000,"Mes":6}]}

The table, in the view:

<table id="informe">
    <thead>
        <tr>
            <th>Mes</th> 
            <th>TotalCredito</th>                
            <th>TotalClientes</th>
            <th>Balance7</th>
            <th>Balance37</th>
            <th>Balance67</th>                               
        </tr>
    </thead>           
</table>

The Script is:

<script>
$(document).ready(function () {

    var arrayDatos = {
        'canal': $(" #ListaCanales ").val(),
        'anio': $(" #ListaAnios ").val(),
        'vendedorsigla': $(" #ListaVendedores ").val()
    };

    var datatable = $('#informe').dataTable({
        "language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
        "bFilter": false,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "mensualajax",
            "type": "POST",
            "dataType": "json",
            "data": arrayDatos
        },
        "columns": [                
            { "data": "Mes", "bSortable": false },
            { "data": "TotalCredito" },
            { "data": "TotalClientes" },
            { "data": "Balance7" },
            { "data": "Balance37" },
            { "data": "Balance67" }               

        ],            
    });
    $(" #FiltrarResultados ").click(function () {

        var arrayDatos = {
            'canal': $(" #ListaCanales ").val(),
            'anio': $(" #ListaAnios ").val(),
            'vendedorsigla': $(" #ListaVendedores ").val()
        };

        datatable.fnClearTable();
        $('#informe').dataTable({
            "bDestroy": true,               
            "language": { "url": "http://cdn.datatables.net/plug-ins/28e7751dbec/i18n/Spanish.json" },
            "bFilter": false,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "mensualajax",
                "type": "POST",
                "dataType": "json",
                "data": arrayDatos
            },
            "columns": [
                { "data": "Mes", "bSortable": false },
                { "data": "TotalCredito" },
                { "data": "TotalClientes" },
                { "data": "Balance7" },
                { "data": "Balance37" },
                { "data": "Balance67" }

            ],
        });
    });
});

is important remark, i use the 'click' function to reload whit ajax the datatables, the 'click' function is nearly equal to the another, but i aggregate "bDestroy": true,in the datatable constructor to reload the datatables (It is not very elegant, but work).

Finally, my new superduper controller to render, capture and updating data with DatatablesJs

        //repository with the query
        var repositorio = new Repositorios.InformeMensualController();

        //capture ajax
        string canal = String.Join("", Request.Form.GetValues("canal"));

        string auxAnio = String.Join("", Request.Form.GetValues("anio"));
        int anio = Convert.ToInt32(auxAnio);

        string auxVendedorCodigo = String.Join("", Request.Form.GetValues("vendedorsigla"));
        int vendedorCodigo = Convert.ToInt32(auxVendedorCodigo);

        //set up data
        var data = repositorio.CargaDatos(canal, anio, vendedorCodigo);

        //Transformación a JSON y Datatables JS.
        var totalDatos = data.Count();
        var jsonData = Json(new {
            iTotalDisplayRecords = totalDatos,
            iTotalRecords = totalDatos,
            aaData = data});

        return jsonData;

I hope this is useful to someone

regards! :)

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks. Now I have to work with C# and it will help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.