Server side processign with manual reload

thizzo

Hi everybody,
i am trying to make server side processing work with a manual reload on the table.

the user can fill an input field. This value needs to be send with the post request.

My code so far:

var tableOpts = {
    serverSide: true,
    deferRender: true,
    ajax: {
        url: 'MyPost'
        type: 'POST',
        contentType: 'application/json',
        data: function(d) {
            d.FieldValue = $("#field").val();
            return JSON.stringify(d);
        }
    },
    dom: "tpa",
    paging: true,
    pageLength: 50,
    pagingType: "full_numbers",
    columns: [
        col.text({
            data: "Col1"
        }),
        col.text({
            data: "Col2"
        }),
        col.text({
            data: "Col3"
        }),
        col.text({
            data: "Col4"
        }),
        col.text({
            data: "Col5"
        }),
        col.text({
            data: "Col6"
        }),
        col.text({
            data: "Col7"
        }),
        col.action({
            data: "Col8",
            icon: "fa-folder-open",
            width: "25px",
            click: openForm
        })
    ],
    columnDefs: [
        {
            orderable: false,
            className: 'text-center',
            targets: 7,
            width: "4vw"
        }
    ]
};

$('#table')
        .dataTable(tableOpts)
        .columnFilter({
            sPlaceHolder: "head:after",
            aoColumns: [
                { type: "text" },
                { type: "text" },
                { type: "text" },
                { type: "text" },
                { type: "text" },
                { type: "text" },
                { type: "text" },
                null
            ]
        });

on a button click i want to reload the table like this:

function loadData() {
    $('#table')
        .DataTable().ajax.reload();
}

i left out the openForm function, this will be an action when the user clicks on the icon.

first call, when side is loaded, server side method gets called.

When i use the button to reload the data in the table i get the following error:

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in {"draw":2,"columns":[{"data":"Col1","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col2","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col3","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col4","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col5","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col6","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col7","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"Col8","name":"","searchable":false,"orderable":false,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":50,"search":{"value":"","regex":false},"FieldValue":"1021"}
at isArraylike (jquery-2.1.4.js:539)
at Function.map (jquery-2.1.4.js:461)
at _fnBuildAjax (jquery.dataTables.js:2590)
at _fnAjaxUpdate (jquery.dataTables.js:2632)
at _fnDraw (jquery.dataTables.js:2095)
at _fnReDraw (jquery.dataTables.js:2214)
at __reload (jquery.dataTables.js:7478)
at _Api.<anonymous> (jquery.dataTables.js:7548)
at _Api.iterator (jquery.dataTables.js:6942)
at _Api.<anonymous> (jquery.dataTables.js:7547)

I know that the method IsArrayLike fails because the data is passed as a string and not an object to the method, but i do not know why and how i can fix this behaviour.

thx and best regards