Post server params and redraw with new source

问题:

I'm using jQuery DataTables. Here is my datatable, at page load server fills datatable with response that's fine but there is a selectbox and I need when an item selected in it datatable must post it as params and render datatable with new response

    var tableObjects = $("#logTable").DataTable({
            "bProcessing": false,
            "bServerSide": true,
            "sAjaxSource": "../../Controller/DashboardController.php5",
            "aoColumns": [
                {"mDataProp": "clientname" ,"sortable": false },
                {"mDataProp": "clientip"},
                {"mDataProp": "url","sortable": false },
                {"mDataProp": "respsize"},
                {"mDataProp": "loggingdate"},
                {"mDataProp": "reqmethod"},
                {"mDataProp": "resultcode"},
                {"mDataProp": "duration"},
                {"mDataProp": "hierarchycode"}
            ],
            "fnServerData": function (sSource, aoData, fnCallback){
                aoData.push({"name":"tablename","value":"dashboard"})
//after select an item in slcbox I add it as parameter so I need edit this party only..
                debugger
                $.ajax({
                    "dataType": "json",
                    "contentType": "application/json; charset=utf-8",
                    "type": "GET",
                    "url": sSource,
                    "data": aoData,
                    "success": function(result){
                        fnCallback(result);
                    },
                    error: function (xhr, textStatus, error){
                        debugger
                        if (typeof console == "object") {
                            console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                        }
                    }});
            },
            "oLanguage": {
                "sLengthMenu": '<select>' +
                '<option value="5">5</option>' +
                '<option value="10">10</option>' +
                '<option value="20">20</option>' +
                '<option value="30">30</option>' +
                '<option value="40">40</option>' +
                '<option value="50">50</option>' +
                '</select> Show'
            },
            "fnCreatedRow": function( nRow, aData, iDataIndex ) {
                });
            },
            "fnDrawCallback": function(){
            },
            "aaSorting": [
                [2, 'asc']
            ],
            "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            "iDisplayLength": 5
        })

I tried this so far, but of course it throws aoData undefined, fncallback undefined error.. it seems there must be other way to do it

$("#slcFilter").on("change",function(){
    debugger
    tableObjects.fnServerData ("../../Controller/DashboardController.php5", aoData, fnCallback)
    {
        aoData.push({"name":"tablename","value":"dashboard"})
        debugger
        $.ajax({
            "dataType": "json",
            "contentType": "application/json; charset=utf-8",
            "type": "GET",
            "url": sSource,
            "data": aoData,
            "success": function(result){
                fnCallback(result);
            },
            error: function (xhr, textStatus, error){
                debugger
                if (typeof console == "object") {
                    console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                }
            }});
    }
});

回答1:

Add another aoData.push() that will add value of the selector to the data being sent to the server as shown below:

"fnServerData": function (sSource, aoData, fnCallback){
   aoData.push({"name":"tablename","value":"dashboard"});
   aoData.push({"name":"select","value":$("#slcFilter").val()});

   // ... skipped ... 
}

Then you need to call draw API method (if initialized with DataTable()) or fnDraw API method (if initialized with dataTable()) in the change handler for select element to re-draw the table and send a new request to the server.

$("#slcFilter").on("change",function(){
    $("#logTable").draw(false);
});