页面长度更改时重新加载数据表

Question

我在服务器端限制查询，它在startResult和maxResult之间返回数据。我希望在页面长度发生变化时重新加载数据表。

这是我的Html代码：

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

这是我的控制者：

@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;
}

这是我的ajax代码：

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')
    }
});

}

我试过这个

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

但它没有奏效。有人可以帮帮我吗？