The variable assigned is not globally changed after ajax success

Question

In this page I have a table with pagination. In the pagination section, the '' with class "first" display the first page record, class "last" last page, class "next" display next following data. These all function are working properly. But my problem is When I click the '' with class 'last', it is displaying the last page record. After that when I click the 'td' with class 'previous' it must display those records just before the last one.

Eg if there are 17 pages and if I click the last then it is showing the 17 th page but when I click 'previous' it must show 16 not other.

So what I tried is update the page number after ajax success but this value is not changing globally in the page.

Can anybody help me with this. Thank you.

Below are my codes.

<div class="container">
    <div class="row">
        <table id="display_result">
        </table>
        <table id="pagination">
            <tr>
                <td><div class="first">|&lt;</div></td>
                <td><div class="previous">&lt;</div></td>
                <td><div class="next">&gt;</div></td>
                <td><div class="last">&gt;|</div></td>
            </tr>
        </table>
    </div>
</div>

$(function(){
    var page;

    function displayData(ip, page, isLast){
        var input = ip;
        var datas = {
            'input': input,
            'page':page,
            'isLast':isLast
        }

        $.ajax({
            url: "getData.php",
            type: 'post',
            dataType: 'json',
            success: function (data) {
                var response = data.result;
                page = data.page;
                $("#display_result").html('');
                $.each(response, function(i, item) {
                    $('<tr>').html(
                        "<td>" + response[i].line + "</td></tr>").appendTo('#display_result');
                });
            },
            async:false,
            data: datas
        });
    }

    $("#pagination").delegate('td div', 'click', function(e) {
        e.preventDefault();
        var filename = $('#myInput').val().split('\\');
        if ($(this).hasClass("first")){
            page = 0;
            displayData(filename[2], page, false);
        }
        if ($(this).hasClass("previous")){
            page = page - 1;
            displayData(filename[2], page, false);
        }
        if ($(this).hasClass("next")){
            page = page + 1;
            displayData(filename[2], page, false);
        }
        if ($(this).hasClass("last")){
            displayData(filename[2], page, true);
        }
    });
})

Answer 1

I solve this problem by adding a new function

function set_page(val){
    page = val;
}

then on ajax success, I pass a updated page

page = data.page;
set_page(page);

This solved for me.