Asp.net mvc4 到数据表 js

Question

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

未捕获的类型错误：无法读取未定义的属性“长度”

“提供”数据表 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 之前，有必要将这 3 个变量包含到 json 中；在控制器中：

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

            ],
        });
    });
});

很重要的一点，我使用'click'函数重新加载数据表，'click'函数几乎等于另一个，但我在数据表构造函数中聚合"bDestroy": true,以重新加载数据表（它是不是很优雅，但工作）。

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

我希望这对某人有用

问候！ :)