Question

我正在使用jQuery DataTables。这是我的数据表，在页面加载服务器填充数据表的响应很好，但有一个选择框，我需要在其中选择的项目数据表必须将其作为参数发布并使用新的响应呈现数据表

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

我到目前为止尝试了这个，但当然它会抛出aoData undefined，fncallback undefined error ..似乎必须有其他方法来做它

$("#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);
                }
            }});
    }
});

Answer 1

添加另一个aoData.push()，它会将选择器的值添加到发送到服务器的数据中，如下所示：

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

   // ... skipped ... 
}

然后，您需要在DataTable()中调用draw API方法（如果使用dataTable()初始化）或fnDraw API方法（如果使用change初始化） select元素的处理程序，用于重新绘制表并向服务器发送新请求。

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

发布服务器参数并使用新来源重绘

1 个答案: