furao
/
test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link href="mricode.pagination.css" rel="stylesheet" />
    <script src="jquery-2.1.4.min.js"></script>
    <script src="mricode.pagination.js"></script>
</head>
<body>
    <fieldset>
        <legend>Form</legend>
        <form>
            name：<input type="text" name="name" />
            phone：<input type="text" name="phone" />
            <button id="btn_search" type="button">搜索</button>
        </form>
    </fieldset>
    <fieldset>
        <legend>Pagination</legend>
        pageIndex <input id="pageIndex" type="text" name="name" value="0" />
        pageSize <input id="pageSize" type="text" name="name" value="10" />
        <button id="btn_init" type="button">初始化</button>
        <button id="btn_destroy" type="button">销毁</button>
        <button id="btn_isInited" type="button">是否初始化</button>
    </fieldset>
    <div id="page" class="m-pagination"></div>
    <div id="eventLog"></div>
    <script>
        btn_init.onclick = function () {
            //if ($("#page").isPaginationInitialized()) {
            //    $("#page").pagination('destroy');
            //}
            $("#page").pagination({
                pageIndex: pageIndex.value,
                pageSize: pageSize.value,
                total: 100,
                debug: true,
                showInfo: true,
                showJump: true,
                showPageSizes: true,
                loadFirstPage: true,
                remote: {
                    url: 'data.json',
                    params: $('form').serializeArray(),
                    success: function (data) {
                        $("#eventLog").append(' remote callback : ' + JSON.stringify(data) + '<br />');
                    }
                }
            });
        }

        btn_destroy.onclick = function () {
            $("#page").pagination('destroy');
            alert('销毁：$("XXX").pagination("destroy")');
        }
        btn_isInited.onclick = function () {
            var isInited = $("#page").pagination();
            var text = '判断是否初始化：$("XXX").pagination() 返回Boolean \r当前：' + (isInited ? "已初始化" : "未初始化");
            alert(text);
        }

        btn_search.onclick = function () {
            //var url = 'data.json';
            //$("#page").pagination('setRemoteUrl', url);
            $("#page").pagination('setPageIndex', pageIndex.value);
            $("#page").pagination('setPageSize', pageSize.value);
            $("#page").pagination('setParams', $('form').serializeArray());
            $("#page").pagination('remote');
            alert('搜索：$("XXX").pagination("remote")');
        }


        $("#page").on("pageClicked", function (event, data) {
            $("#eventLog").append('EventName = pageClicked , pageIndex = ' + data.pageIndex + '<br />');
        }).on('jumpClicked', function (event, data) {
            $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + data.pageIndex + '<br />');
        }).on('pageSizeChanged', function (event, data) {
            $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + data.pageSize + '<br />');
        });
    </script>
</body>
</html>