Question

DataTables spring mvc support

我正在使用一个Weblogic数据源，我最终尝试从Weblogic数据源一次检索一条记录，然后一次一个地在数据表中显示该记录。 DataTables.net有一个名为＆＃34;添加行＆＃34;的示例但它不适合使用从数据源获取数据。空数据表显示在网页上，我可以看到查询正确运行到数据源，但是记录没有显示在数据表中。

我在我的代码中包含以下内容：

<script src="<c:url value="/resources/js/jquery.js" />"></script>
<script src="<c:url value="/resources/js/jquery.min.js" />"></script>
<script src="<c:url value="/resources/js/jquery.dataTables.min.js" />"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.css"/>

来自CONTROLLER的

代码段：

@RequestMapping(value = "/locate", method = RequestMethod.GET)
    public @ResponseBody NewOrder getModelYearAndVehicleOrder(
           @RequestParam(value="modelYear") String modelYear\, 
           @RequestParam(value="vehicleOrder\") String vehicleOrder\){
        if (modelYear\.isEmpty() || vehicleOrder\.isEmpty())
        throw new IllegalArgumentException("Try Again!");

        NewOrder newOrder;

        try {
            newOrder= OrderRepo.findNewOrderByModelYearAndVehicleOrder(modelYear, vehicleOrder);
        }
        catch (Exception e){
            @SuppressWarnings("deprecation")
            Throwable _e = ExceptionUtils.getCause(e);
            throw new ExceptionHandler(
                DatabaseMessage.RETRIEVE_ERROR.toString(), _e.getMessage());
        }
        return newOrder;
        }

HTML：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <body>
        <h1>Template Spring MVC App</h1>


    <form id= "locateVehicle">
        <p> Model Year?  <input id="modelYear" type="text" th:field="*{modelYear}" /> </p>
        <p> Order? <input id="orderNum" type="text" th:field="*{vehicleOrder}" /> </p>
        <button onclick="goToDetails()">Locate</button>
    </form>

<br></br>
    <div class="row">
        <div class="col-lg-12">         
            <table id="list" class="display">
                <thead>
                    <tr>
                        <th>Model Year</th>
                        <th>Order #</th>
                        <th>Model</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="order" items="${order}" varStatus="loop">
                            <tr>
                                <td><c:out value="${order.modelYearNbr}" /></td>
                                <td><c:out value="${order.vehicleOrderNm}" /></td>
                                <td><c:out value="${order.model}" /></td>
                            </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

JS：

<script>
    $(document).ready( function () {
        $('#list').DataTable();
    } );

    function goToODetails() {
        var modelYear = $('#modelYearId').val();
        var vehicleOrder =  $('#vehicleOrderId').val();
        var url = './DataLoader/locate?modelYear=' + modelYear + '&vehicleOrder' + vehicleOrder;
    $.get(url,function(result) {
        var vehicle = result;
        var list = $("#list");

        list.append('<tr><td>' + result.modelYearNbr    + '</td>' + 
                        '<td>' + result.vehicleOrderNm  + '</td>' + 
                        '<td>' + result.model           + '</td></tr>');
            });
        }
    </script>

在我添加数据表文件之前，我能够看到网页上的记录帖子，现在它没有发布到表格中。

Answer 1

终于搞定了，这是如何：

$(document).ready(function() {
        var table = $('#orderList').DataTable()

$('#goToOrder').on('click', function() {
        var modelYear = $('#modelYearId').val();
        var url = './DataLoader/locate?modelYear=' + modelYear;

    $.get(url, function(result) {

        $(result).each(function( i, object ){  
             var vehicle = result[i];

        table.row.add([
            vehicle.modelYear, 
            vehicle.vehicleOrder, 
            vehicle.model
         ]).draw(false)
           .nodes()
           .to$();
            })          
        })
    })
});

从数据源向dataTables添加行

1 个答案: