ASP.NET MVC4到DataTables JS

Question

问题在于Datatables JS处于“处理中”状态，Chrome调试抛出：

未捕获的TypeError：无法读取未定义的属性“ length”

有问题的代码“馈送”数据表js是（数据是一些linq查询）：

var jsonData = Json(data);

return jsonData;

响应为（文本响应）：

    [{
    "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
}]

该视图中的脚本函数为：

<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" }
        ],            
    });
});

最后，该表是：

<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>

我发现奇怪的是，尽管信息格式正确，但无法处理。

Answer 1

最后，我解决了这个问题

在看到许多示例之后，我注意到在将json对象解析为datatables js之前，有必要在json中包含这3个变量； 在控制器中：

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

惠特这个“功能”，json对象是这样的

{"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}]}

该表在视图中：

<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>

脚本是：

<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" }

            ],
        });
    });
});

重要提示，我使用“点击”功能重新加载了ajax数据表，“点击”功能几乎等于另一个，但是我聚合了"bDestroy": true,在数据表构造函数中重新加载了数据表（不是很优雅，但是可以工作）。

最后，我的新超级控制器使用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;

我希望这对某人有用

问候！ :)