Add rows to dataTables from data source

Question

DataTables spring mvc support

I am using one Weblogic data source, I am ultimately attempting to retrieve one record at a time from the Weblogic data source and then display that record in a data table also one at a time. DataTables.net has an example called "add rows" but it does not accommodate using getting data from data sources. The empty data table displays on the webpage, I can see the query running correctly to the data source however the record is not displaying in the data table.

I included the following in my code:

<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"/>

Snippet from 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>

Before I added the data table files I was able to see the record post to the webpage, now it is not posting to the table.

jcthomas113 · Accepted Answer · 2016-01-15 17:10:37Z

2

Finally got it working, here is how:

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

answered Jan 15, 2016 at 17:10

jcthomas113

4121 gold badge5 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Add rows to dataTables from data source

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