请选择 进入手机版 | 继续访问电脑版

学JAVA网

 找回密码
 立即注册

easyui Pagination分页组件的使用

[复制链接]
发表于 2018-5-13 10:40:41 |显示全部楼层

概述:   

   分页(pagination)允许用户通过翻页导航数据

展示:
  
   

分页

分页

   
用法:
   
     1:使用html标签创建
  1. <div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
复制代码
2:  使用js脚本创建
           <div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

           
  • $('#pp').pagination({
  • total:2000,
  • pageSize:10
  • });

实例教程:
  
     实例说明:我们查询出文章表中的文章 并且每页显示10条数据  使用easyui分页组件来做分页。

     Mysql数据表article结构: id  title  content
      
     第一步:首先我们创建一个pagination.html 页面
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>EasyUI</title>
  7. <script src="easyui/jquery.min.js" type="text/javascript"></script>
  8. <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script>
  9. <link href="easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css"/>
  10. <body>
  11.         
  12. </body>
  13. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|学JAVA网

GMT+8, 2018-12-11 12:09 , Processed in 0.151694 second(s), 24 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

Copyright © 2015-2018 xuejava网 / 鲁ICP备17054568号-1
回顶部