Jay113 Jay113 - 1 month ago 16
Javascript Question

Add rows to dataTables from data source

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.

Answer

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