dataTables Change Data for ajax call

Question

I'm using the following function to load a DataTables table with data from the server. I would like to reload the table with different parameters on a click event only i cant work out how to do this. If i call reload it just reloads with the original parameters if i reinitialise the whole table it throws an error as the table already exists.

I have been looking into fnServerParams but cant work out if it would help or not.

If anyone can point me in the correct direction that would be great.

function LoadRiskProfileModalTable(userId, teamId, riskProfileClass) {

var params = {
    userId: userId,
    teamId: teamId,
    riskProfileClass: riskProfileClass
};

var data = JSON.stringify(params);
//if (!$.fn.DataTable.isDataTable("#riskProfileTable")) {

    var table = $("#riskProfileTable").DataTable({
        "bProcessing": true,
        "sAjaxSource": "WFMHome.aspx/GetRiskProfileDrillThroughDatatable",
        "fnServerData": function (sSource, aoData, fnCallback) {
            //aoData.push(JSON.stringify(params));
            $.ajax({
                "dataType": 'json',
                "contentType": "application/json; charset=utf-8",
                "type": "POST",
                "url": sSource,
                "data": data,
                "success": function (msg) {
                    var json = jQuery.parseJSON(msg.d);
                    fnCallback(json);
                    $("#riskProfileTable").show("fast", function () { $('#riskProfileTableLoading').hide("fast") });
                },
                error: function (xhr, textStatus, error) {
                    if (typeof console == "object") {
                        appendAlert("errorAlertPlaceholder", xhr.responseText, 1, "danger");
                        console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                    }
                }
            });
        },
        "columns": [
            { "data": "CaseHandler" },
            { "data": "caseAreaText" },
            { "data": "RiskProfileText" },
            { "data": "PassChecks" },
            { "data": "F1Checks" },
            { "data": "F2Checks" },
            { "data": "F3Checks" },
            { "data": "CurrentChecks" }
        ]
    });
//} 
//else {
//        $('#riskProfileTable').DataTable().ajax.reload();
//    }
};

Currently I have resolved my immediate problem by destroying, removing and appending the table definition within the function. I would like a more elegant solution though. — ZedZim
– ZedZim, Commented Nov 25, 2016 at 9:21

river_coder · Accepted Answer · 2016-11-25 13:59:04Z

1

If you just want to replace the data you have now by the data coming from the server, try to replace the success method by:

"success": function (msg) {
    var json = jQuery.parseJSON(msg.d); //I assume it's the data set
    var table = $("#riskProfileTable").DataTable();
    table.rows.clear(); //clear the current data
    table.rows.add(json).draw();
    $("#riskProfileTable").show("fast", function () { $('#riskProfileTableLoading').hide("fast") });
},

answered Nov 25, 2016 at 13:59

river_coder

112 bronze badges

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

Collectives™ on Stack Overflow

dataTables Change Data for ajax call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related