Question

的JavaScript

$(document).ready(function() {
    console.log("get tasks");
    $('#tblTask').dataTable({
        <!-- Retrieve a static json file, you could also have a URL to a controller method. -->
        "sAjaxSource" : "/getTasks",
        "sAjaxDataProp": "",
        <!-- Indicate to dataTable what the field names are we want, in the order we want them in the table. -->
        "aoColumns": [
                      {"data": "taskID",
                         "visible": false},
                      {"data": "task_Runbook_ID",
                         "visible": false},
                      {"data": "taskNumber"},
                      {"data": "taskDependencies"},
                      {"data": "taskStatus"},
                      {"data": "taskDescription"},
                      {"data": "duration"},
                      {"data": "ownerName"},
                      {"data": "planStartTime"},
                      {"data": "planEndTime"},
                      {"data": "actualStartTime"},
                      {"data": "actualEndTime"},
                      {"data": "comments"}
            ]


    });
});

表

<table class="table" id="tblTask">
                                        <thead>
                                            <tr>
                                                <th style="display: none">ID</th>
                                                <th style="display: none">Runbook ID</th>
                                                <th width="50px">Task Number</th>
                                                <th width="70px">Dependency</th>
                                                <th width="50px">Status</th>
                                                <th width="100px">Description</th>
                                                <th width="30px">Duration</th>
                                                <th width="70px">Owner</th>
                                                <th width="50px">Planned Start</th>
                                                <th width="50px">Planned End</th>
                                                <th width="50px">Actual Start</th>
                                                <th width="50px">Actual End</th>
                                                <th width="50px">Comments</th>

                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>

爪哇

@RequestMapping(value = "/getTasks")
public @ResponseBody Iterable<Task> getTasks(Model model) {
    //  System.out.println("RBID!!!" + request.getParameter("rbID"));
    List<Task> tasks = taskRepository.findByTaskRunbookID(3); //3 is here until we can get id from gui
    return tasks;
}

因此，当页面加载时，我正在加载一个DataTable，其中包含从服务器检索到的一堆任务，这些任务从数据库中检索它。但是，我想在发出请求时从客户端发回一个javascript变量，因此该方法可以根据ID检索任务列表。

此代码有效，因为它只加载所有任务。现在我想根据我从客户端发送的变量加载特定任务。

我想要伪：

var rbID = something;

$('#tblTask').dataTable({
        "sAjaxSource" : "/getTasks",
        "data" : {"rbID" : rbID }, //this is sent to the server, where I query a list of tasks where taskID is equal to this rbID.

        "sAjaxDataProp": "",
        "aoColumns": [.....] // Then the response is a JSON object, which I display in the DataTable like so.

Answer 1

我明白了。

"sAjaxSource" : "/getTasks",
            "fnServerData": function ( sSource, aoData, fnCallback ) {
                /* Add some data to send to the source */
                aoData.push( { "name": "rbID", "value": rbID } );
                $.ajax( {
                    "dataType": 'json',
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                } ); },

如何通过ajax将变量发送到服务器（Java），然后使用响应加载DataTable

1 个答案: