Reloading data table when length of page changes

Question

I have limit query on the server side which returns me data between startResult and maxResult. I want to reload data table when length of page changes.

This is my Html code:

<table class="table table-striped" id = "cardTable">
        <thead>
            <tr>
                <th>expression</th>
                <th>type</th>
                <th>edit card</th>
            </tr>
        </thead>
        <tbody>

            <c:forEach var="card" items="${cards}">
                <tr>

                    <td>${card.expression}</td>
                    <td>${card.type.name} <input class="card" name="card" type="hidden" value="${card.id }"></td>

                    <!--<td><button data-toggle="modal" data-target="#cardUpdate" class="btn btn-primary">Edit</Button></td>-->
                    <td><button class="updateCard btn-primary">edit</button></td>
                </tr>
            </c:forEach>
        </tbody>

This is my controller:

@RequestMapping(value="/card.html/{startResult}/{maxResult}", method=RequestMethod.GET)
private @ResponseBody ModelAndView getCardPage(@PathVariable("startResult") int start,@PathVariable("maxResult") int maxResult) {
    cards = (ArrayList<Card>) cardDao.findWithLimit(start,maxResult);
    ModelAndView cardView = new ModelAndView("Card");
    cardView.addObject("cards",cards);
    cardView.addObject("types",types);
    return cardView;
}

This is my ajax code:

function resetTable(startResult,maxResult) {

$.ajax({
    type:"GET",
    url: contexPath + "/card.html/" + startResult + "/" + maxResult,
    data: "startResult=" + startResult + "&maxResult=" + maxResult,
    success:function() {
        alert("success")
    },
    error:function(e) {
        alert('fail')
    }
});

}

I have tried this

$('#cardTable').on( 'length.dt', function ( e, settings, len ) {
    $("#cardTable").DataTable().clear().draw();
    resetTable(0,10);
} );
})

But it has not worked. Can anyone help me please?