Skip to content
This repository has been archived by the owner on Nov 21, 2024. It is now read-only.

The paging controls the increased search options error #33

Open
caojinqin opened this issue Dec 1, 2015 · 1 comment
Open

The paging controls the increased search options error #33

caojinqin opened this issue Dec 1, 2015 · 1 comment

Comments

@caojinqin
Copy link

Version: 1.0.7
jquery-2.1.3

The paging controls the increased search options error, when I click on the search button to select the Collate option again, the data of page will be repeated loading times!

Here is my code:

    //数据分页显示
    $(function () {
        //加载首页
        getPageList();
    });

    //点击关键字搜索
    $('#btnSearch').on("click", function () {
        getPageList();
    });

    //按回车查询
    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $("#btnSearch").click();
        }
    }
    //刷新数据
    function refreshData(queryObject) {

        //alert(queryObject.pageIndex);
        //alert(num);

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetPageList", "UserLog")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(queryObject),
            success: function (result) {
                $('#dataList').empty();
                var myTmpl = $.templates("#dataTmpl");
                var html = myTmpl.render(result);
                $("#dataList").html(html);

                $("#content").append("Test ");

                //maxVisible 最多可见的页数
                $(this).bootpag({ total: result.pageCount });
            },
            error: function (error) {
                window.location.href = "MyAccount/LogOff";
                //alert("有错误: " + error.responseText);
            }
        });

    }

    //点击搜索条件或者升序降序,当前页为1
    function getPageList() {
        var queryObject = {
            startDate: $('#startDate').val(),
            endDate: $('#endDate').val(),
            logTypeID: $('#logTypeID').val(),
            pageIndex: 1,
            pageSize: 10
        };
        //alert(queryObject.pageIndex);

        $.ajax({
            type: "POST",
            url: '@Url.Action("GetPageList", "UserLog")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(queryObject),
            success: function (data) {
                $('#dataList').empty();
                //清除分页脚本
                $('#page-selection').empty();
                var myTmpl = $.templates("#dataTmpl");
                var html = myTmpl.render(data);
                $("#dataList").html(html);

                //如果分页数小于1则隐藏分页样式
                if (data.pageCount <= 1) {
                    $("#page-selection").css('display', 'none');
                }
                else {
                    $("#page-selection").css('display', 'block');
                }

                // init bootpag
                $('#page-selection').bootpag({
                    total: data.pageCount, //初始显示的页数
                    page: 1,//每次查询之后都从第一页开始显示
                    maxVisible: 10
                }).on("page", function (event, num) { //点击分页按钮
                    //更新当前页
                    queryObject.pageIndex = num;
                    refreshData(queryObject);
                });
            },
            error: function (error) {
                window.location.href = "MyAccount/LogOff";
                //alert("有错误: " + error.responseText);
            }
        });
    }
@caojinqin
Copy link
Author

The problem has been resolved:
Refer to the website:

http://stackoverflow.com/questions/31118087/bootpag-event-runs-several-times-when-used-after-a-returned-ajax-function?answertab=active#tab-top

function refreshData() {
return $.ajax({
// some ajax call data info here to get the filtered results
}).then(function (data) {
return $("#paging").bootpag({
total: (data.totalResults / CONST_RESULTS_PER_PAGE) + 1
});
});
}

//on init of page do
refreshData().then(function (bootpag) {
bootpag.on('page', function (event, num) {
updateListWithFilteredResults(num);
});
});

//on user click just
refreshData();

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant