qinshenxue-jquery.pagination
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery.pagination演示</title>
    <link rel="stylesheet" href="src/jquery.pagination.css?v=1">
    <link rel="stylesheet" href="src/jquery.pagination.custom.css?v=1">
    <style>
        body {
            font-size: 14px;
            line-height: 1.42857143;
            font-family: Helvetica Neue, Hiragino Sans GB, Microsoft YaHei, \\9ED1\4F53, Helvetica, Arial, sans-serif;
        }

        .hljs {
            display: block;
            overflow-x: auto;
            padding: 0.5em;
            color: #333;
            background: #f8f8f8;
            font-family: Consolas;
        }

        .hljs-comment,
        .hljs-quote {
            color: #998;
            font-style: italic;
        }

        .hljs-keyword,
        .hljs-selector-tag,
        .hljs-subst {
            color: #333;
            font-weight: bold;
        }

        .hljs-number,
        .hljs-literal,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-tag .hljs-attr {
            color: #008080;
        }

        .hljs-string,
        .hljs-doctag {
            color: #d14;
        }

        .hljs-title,
        .hljs-section,
        .hljs-selector-id {
            color: #900;
            font-weight: bold;
        }

        .hljs-subst {
            font-weight: normal;
        }

        .hljs-type,
        .hljs-class .hljs-title {
            color: #458;
            font-weight: bold;
        }

        .hljs-tag,
        .hljs-name,
        .hljs-attribute {
            color: #000080;
            font-weight: normal;
        }

        .hljs-regexp,
        .hljs-link {
            color: #009926;
        }

        .hljs-symbol,
        .hljs-bullet {
            color: #990073;
        }

        .hljs-built_in,
        .hljs-builtin-name {
            color: #0086b3;
        }

        .hljs-meta {
            color: #999;
            font-weight: bold;
        }

        .hljs-deletion {
            background: #fdd;
        }

        .hljs-addition {
            background: #dfd;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div style="width:800px;margin: 0 auto;">

    <h2>示例</h2>
    <div id="test" style="margin: 20px 0"></div>
    <div id="output" style="margin: 20px 0"></div>
    <h2>示例代码</h2>
    <pre><code class="javascript hljs">$(<span class="hljs-string">'#test'</span>).pagination({
    <span class="hljs-attr">current</span>: <span class="hljs-number">2</span>,  <span
                class="hljs-comment">// 默认为1</span>
    pageSize: <span class="hljs-number">20</span>,  <span class="hljs-comment">// 默认为10</span>
    total: <span class="hljs-number">1234</span>,  <span class="hljs-comment">// 默认0</span>
    callback: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">pageno, pagination</span>) </span>{
        $(<span class="hljs-string">'#output'</span>).text(<span class="hljs-string">'获取第'</span> + pageno + <span
                class="hljs-string">'数据'</span>);
    }
})</code></pre>
    <h2>自定义样式</h2>
    <div id="custom" class="pagination-custom" style="margin: 20px 0"></div>
    <pre><code class="javascript hljs">$(<span class="hljs-string">'#custom'</span>).pagination({
    <span class="hljs-attr">current</span>: <span class="hljs-number">2</span>,  <span class="hljs-comment">// 默认为1</span>
    pageSize: <span class="hljs-number">20</span>,  <span class="hljs-comment">// 默认为10</span>
    total: <span class="hljs-number">1234</span>,  <span class="hljs-comment">// 默认0</span>
    callback: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">pageIndex, pagination</span>) </span>{

    }
})</code></pre>
</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="src/jquery.pagination.js?v=1"></script>
<script>
    $('#test').pagination({
        current: 2,  // 默认为1
        pageSize: 20,  // 默认为10
        total: 1234,  // 默认0
        callback: function (pageIndex, pagination) {
            $('#output').text('获取第' + pageIndex + '页数据');
        }
    })

$('#custom').pagination({
    current: 2,  // 默认为1
    pageSize: 20,  // 默认为10
    total: 1234,  // 默认0
    callback: function (pageIndex, pagination) {

    }
})
</script>

</body>
</html>