jQuery AJAX call in jTable

Question

I am trying to implement paging in jTable. Can anyone help me understand the code below? I have read the jQuery Ajax documentation and understand all but the URL, specifically what is the url referring to? Why is the url field formatted the way it is? e.g. why /demo/studentlist?jtStartIndex what does this mean?

listAction: function (postData, jtParams) {
    return $.Deferred(function ($dfd) {
        $.ajax({
            url: '/Demo/StudentList?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
            type: 'POST',
            dataType: 'json',
            data: postData,
            success: function (data) {
                $dfd.resolve(data);
            },
            error: function () {
                $dfd.reject();
            }
        });
    });
}

Currently I have a php script that is calling stored procedures in a mysql database. Is AJAX the only way to implement paging in this case or could I implement the above for paging using jTable by doing something along the lines of:

(Redudant code not included)

//open database etc
$offset = $_POST['jtStartIndex'];
$amount = $_POST['jtPageSize'];
$result = $mysqli -> query ("CALL Proc($offset, $amount);
//while loop using fetch_assoc() to assign row objects to rows array
$jtableResults['Result'] = "OK";
$jtableResults['Records'] = $rows;
//close
echo json_encode($jtableResults);

MySQL Procedure:

CREATE DEFINER='user''@'%' PROCEDURE 'Proc' (offset INTEGER, amount INTEGER)
BEGIN
SELECT * FROM reports Order By idReports ASC LIMIT offset, amount;
END

I believe I cannot do above because jTable expects the jtParams object back in a AJAX call?

Answer 1

What's not to understand, URL is most important part of $.ajax call, basically it is a end point you need to call to get some data. This URL can be absolute like in this case:

var url = 'http://api.themoviedb.org/3/',
    mode = 'search/movie?query=',
    movieName = '&query='+encodeURI($('#movie-title').val()),        
    key = '&api_key=470fd2ec8853e25d2f8d86f685d2270e';      

$.ajax({
    url: url + mode + key + movieName ,
    dataType: "jsonp",
    async: true,
    success: function (result) {
        ajax.parseJSONP(result);
    },
    error: function (request,error) {
        alert('Network error has occurred please try again!');
    }
});

Or it can be relative like in your case. In your case, url destination file is just some server side class (ASP.NET, PHP would usually have .php extension) that accepts certain parameters and returns a JSON response, something like this:

{
 "Result":"OK",
 "Record":{"PersonId":5,"Name":"Dan Brown","Age":55,"RecordDate":"\/Date(1320262185197)\/"}
}

Because you are a PHP developer, your destination URL would look like:

demo/StudentList.php?jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting

I forgot one last thing. When working with $.ajax calls, absolute URL is used when client side works independently from server side (like in case of hybrid mobile applications) or in case you want to call some public API (like IMDB, Yahoo weather etc.) . Relative URL is used when you work on a classic web site where destination URL is your web server, basically same source like your site.