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