Error reload datatable with new json data

Rsaavedra

Hi °
I have loaded the data in my table and everything is going well, the problem is when I want to update the table depending on the filters with external controls.

This filter returns the same result in a WebMethod with asp.net c #, it only returns less data than the first load.

function CargarGridBonds() {
    if ($.fn.dataTable.isDataTable('#gvBonds')) {
        var jsonData = null;
       var tv = $('#ContentPlaceHolder1_cboTv').val();
       var issuer = $('#ContentPlaceHolder1_cboIssuer').val();
       var serie= $('#ContentPlaceHolder1_cboSerie').val();
       var emisor= $('#ContentPlaceHolder1_cboEmisor').val();
       var fecha=''
     $.ajax({
            type: 'POST',
            url: "Name.aspx/GetBondsFilter",
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: 'json',
            data: "{ 'tv':'" + tv + "','issuer':'" + issuer + "','serie':'" + serie + "','emisor':'" + emisor + "','fecha':'" + fecha + "'}",
            success: function (json) {
                var datos = json.d.data;

                jsonData = JSON.stringify(datos);
            },
            failure: function () {
                alert("Sorry,there is a error!");
            }
        });

     table .clear().draw();
   table .rows.add(jsonData ); // Add new data
  table .columns.adjust().draw(); // Redraw the DataTable
    }
    else {

        table = $("#gvBonds").DataTable({
            scrollY: "600px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            'searching': false,
            "bFilter": true,
            ajax: {
                method: "POST",
                url: "Name.aspx/GetBondsJson",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: function (d) {
                    return JSON.stringify(d);
                },
                dataSrc: "d.data"
            },
            columns: [
                        { 'data': 'IdentifierID', "visible": false },
                        { 'data': 'TV' },
                        { 'data': 'Issuer' },
                        { 'data': 'Series' },
                        { 'data': 'Emisor' },
                        {
                            data: 'FechaVencimiento',
                            type: 'date',
                            render: function (data, type, row) { return data ? moment(data).format('DD/MM/YYYY') : ''; }
                        },
                         { 'data': 'IsShortRate' },
                        { 'data': 'Liquidity_Desc' },
                        { 'data': 'Internal_Desc' },
                        { 'data': 'Global_Fitch_Desc' },
                        { 'data': 'Global_Moodys_Desc' },
                        { 'data': 'Global_SP_Desc' },
                        { 'data': 'Global_HR_Desc' },
                        { 'data': 'Local_Fitch_Desc' },
                        { 'data': 'Local_Moodys_Desc' },
                        { 'data': 'Local_SP_Desc' },
                        { 'data': 'Local_HR_Desc' }


            ],
            'columnDefs': [{
                'targets': 6,
                'searchable': false,
                'orderable': false,
                'className': 'dt-body-center',
                'render': function (data, type, full, meta) {
                    var is_checked = data == true ? "checked" : "";
                    return '<input type="checkbox" class="checkbox" ' +
                        is_checked + ' disabled/>';

                }
            }],
            "language": {
                "sProcessing": "Procesando...",
                "sLengthMenu": "Mostrar _MENU_ registros",
                "sZeroRecords": "No se encontraron resultados",
                "sEmptyTable": "Ningún dato disponible en esta tabla =(",
                "sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
                "sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
                "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
                "sInfoPostFix": "",
                "sSearch": "Buscar:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Cargando...",
                "oPaginate": {
                    "sFirst": "Primero",
                    "sLast": "Último",
                    "sNext": "Siguiente",
                    "sPrevious": "Anterior"
                },
                "oAria": {
                    "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                    "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                },
                "buttons": {
                    "copy": "Copiar",
                    "colvis": "Visibilidad"
                }
            },
        });

        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: 4
        });
    }
}

The problem is when I call the function from a button, the next line is validated where the datatable is already built.

$("#btnFiltro").click(function () {
    CargarGridBonds();
});

if ($.fn.dataTable.isDataTable('#gvBonds')) {...

It does not allow me to apply the new data in json

  table .clear().draw();
   table .rows.add(jsonData ); // Add new data
  table .columns.adjust().draw(); // Redraw the DataTable

The error is:

Details:
The table has no filter.
The table has ordering.
The table has the first 4 fixed columns

Thanks.
-Rafael

kthorngren

Follow the troubleshooting steps in the link provided in the error. Basically you need to look at the structure of jsonData to make sure it matches your Datatables config.

Kevin