jquery pagination实现分页效果代码

代码语言:html

所属分类:表单美化

代码描述:jquery pagination实现分页效果代码

代码标签: 分页 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.pagination-beta.css">


</head>
<body>







    <div class="container body-content">
        <h1>Demo</h1>
        <div class="row">
            <div class="col-lg-12 form-inline">
                <h3>默认</h3>
                <ul class="list-group">
                    <li class="list-group-item">
                        <div id="page1" class="m-pagination"></div>
                    </li>
                    <li class="list-group-item">

                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 form-inline">
                <h3>Ajax分页</h3>
                <p>
                    ajax分页,返回Json格式数据,其中必须返回 total(总数据数,用以计算分页)和列表数据(列表数据需自行在回调函数中处理)。
                    <br />
                    若第一页不需要加载分页,可以配置 loadFirstPage:false (注意:设置首页不加载分页时,初始化必须设置total)
                </p>
                <ul class="list-group">
                    <li class="list-group-item">
                        <div id="page2" class="m-pagination"></div>
                    </li>
                    <li class="list-group-item">

                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 form-inline">
                <h3>事件</h3>
                <p>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div id="page3" class="m-pagination"></div>
                            <div>
                                Event Log :
                            </div>
                            <label id="eventLog3"></label>
                        </li>
                        <li class="list-group-item">

                        </li>
                    </ul>
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 form-inline">
                <h3>自定义按钮</h3>
                <p>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <div id="page4" class="m-pagination"></div>
                        </li>
                        <li class="list-group-item">

                        </li>
                    &.........完整代码请登录后点击上方下载按钮下载查看

网友评论0