JTable Not Showing Sort Or Pagination

Question

I am passing in a JSON array to my JTable and am trying to use AJAX to show the data with no page load. This is an asp.net core mvc app with a C# back-end. The data loads, but as i said i do not have the ability to sort and all results are shown instead of only 10 per page as I request in the sorting param.

What do I ned to change here?

[Route("api/ca")]
public JsonResult Index()
{
    var ListData = _context.CIModel.FromSql("StoredProcedureName").ToList();
    return Json(new { Result = "OK", Records = ListData, TotalRecordCount = ListData.Count });
}

$('#btnTest').click(function () {
    $('#jTableTest').jtable({
        paging: true,
        pageSize: '10',
        sorting: true,
        defaultSorting: 'Name ASC',
        actions: {
            listAction: function (postData, jtParams) {
                return $.Deferred(function ($dfd) {
                    $.ajax({
                        url: 'https://localhost:44328/api/ca?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                        type: 'GET',
                        dataType: 'json',
                        success: function (data) {
                            $dfd.resolve({ Records: data.records, Result: data.result, TotalRecordCount: data.TotalRecordCount });
                        },
                        error: function () {
                            $dfd.reject();
                        }
                    });
                });
            }
        },
        fields: {
            name: {
                title: 'Name',
                width: '35%'
            },
            phone: {
                title: 'Phone',
                width: '15%'
            },
            yrsexp: {
                title: 'Experience',
                width: '15%'
            }
        }
    });
    $('#jTableTest').jtable('load');
});

Answer 1

Sorting and paging are both SERVER side operations. You need slight changes on both client and server.

On the client, in this example you don't need to write your own deferred function, Just give jTable the URL. It will then pass, paging (jtStartIndex and jtPageSize) and sorting (jtSorting) parameters to the server. These parameters are in the jtParams argument passed to the deferred function, so you have to forward them in you ajax call.

One the server, you need to respond to these sorting and paging parameters. Do note, that on a paged reply, TotalRecordCount is the total number of unpaged records. not the number returned. It is used by jTable to show the total number of pages.