JQuery EasyUI(19)_jquery easyui onselectpage-优快云博客

第十九章：Pagination（分页）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

1.class 加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div class="easyui-pagination" data-options="total:2000,pageSize:10," style="order:1px solid #ccc">    
      
    </div>
 </body>
</html>

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>
    <div id="box" style="order:1px solid #ccc">    
      
    </div>
 </body>
</html>

$(function(){

    $('#box').pagination({
     

    });
});

二、属性列表：

Pagination属性列表
属性名	值	说明
total	none	总记录数，在分页控件创建时初始的值。默认值1。
pageSize	none	每页显示条数，默认值10。
pageNumber	none	在分页控件创建的时候显示的页数。默认值为1。
pageList	array	用户可以改变页面大小，pageList属性定义了页面导航展示的页码。默认值为[10,20,30,50]。
loading	boolean	定义数据是否正在载入。默认值为false。
buttons	array	自定义按钮：可用值有：1.每一个按钮都有两个属性：iconCls：显示背景图片的CSS类ID。handler：当按钮被点击时调用的一个句柄函数。2.页面已存在元素的选择器对象(例：buttons:'#btnDiv')默认值为null。
layout	array	分页控件布局定义。布局选项可以包含一个或多个值：1.list：页面显示条数列表。2.sep：页面按钮分割线。3.first：首页按钮。4.prev：上一页按钮。5.next：下一页按钮。6.last：尾页按钮。7.refresh：刷新按钮。8.manual：手工输入当前页的输入框。9.links：页面数链接。
showPageList	boolean	定义是否显示页面导航列表。
showRefresh	boolean	定义是否显示刷新按钮。
beforePageText	string	在输入组件之前显示一个label标签。
afterPageText	string	在输入组件之后显示一个label标签。
displayMsg	string	显示页面信息。

三、事件列表：

Pagination事件
事件名	传参	说明
onSelectPage	pageNumber,pageSize	用户选择一个新页面的时候触发，回调函数包含两个参数：pageNumber 新的页数。pageSize：每页显示的条数。
onBeforeRefresh	pageNumber,pageSize	再点击刷新按钮刷新之前触发，返回false可以取消刷新动作。
onRefresh	pageNumber,pageSize	刷新之后触发。
onChangePageSize	pageSize	在页面更改页面大小的时候触发。

四、方法列表：

Pagination方法
方法名	传参	说明
options	none	返回参数对象。
loading	none	提醒分页控件正在加载中。
loaded	none	提醒分页控件加载完成。
refresh	options	刷新并显示分页栏信息。
select	page	选择一个新页面，页面索引从1开始。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>              
</head>
  <body>

     <div id="content" class="easyui-panel" style="height:200px;" data-options="href:'user.php?page=1&pagesize=1'"></div>
    <div id="box" style="order:1px solid #ccc"></div>
 </body>
</html>

$(function(){

    $('#box').pagination({
     
      total:5,
      pageSize:1,
      pageNumber:1,
      pageList:[1,2],
      //loading:true,
      buttons:[{
          iconCls:'icon-add',
      },'-',{
          iconCls:'icon-edit',
      }],
      layout:['first','prev','links','next','last'],
      showPageList:false,
      showRefresh:false,
      beforePagetext:'弟弟',
      afterPagetext:'有{pages}个',
      displayMsg:'从{from}到{to},有{tatal}人',
      onSelectPage:function(pageNumber,pageSize){
        $('#box').pagination('loading');
        $('#content').panel('refresh','user.php?page='+pageNumber+'&pageSize='+pageSize);
        setTimeout(function(){
          $('#box').pagination('loaded');
        },1000);
      },
      onBeforeRefresh:function(pageNumber,pageSize){
          alert('刷新之前');
   },
      onRefresh:function(pageNumber,pageSize){
          alert('刷新之后');
   },
      onChangePageSize:function(pageSize){
          alert('每页显示的条数在改变！');
   },
    });

  $(decument).click(function(){
    /*
      $('#box').pagination('refersh',{
           pageSize:2,
           pageNumber:2,
      });
    */

    $('#box').pagination('select',2);
  });
});

<?php

    //user.php

   sleep(1);
   require(config.php);
   $page = $_GET['page'];
   $pageSize = $_GET['pageSize'];
   $first = $pageSize * ($page - 1);

   $query = mysql_query("SELECT * FROM think_user LIMIT $first,$pageSize");

   while(!!$row = mysql_fetch_array($query,MYSQL_ASSOC)){
      echo '<ul>';
      echo '<li>'.$row['user'].'----'.$row['email'].'</li>';
      echo '</ul>';

   }

   mysql_close;
?>

<?php

   header('Content-Type:text/html;chartset:utf-8');

   define('DB_HOST','localhost');
   define('DB_USER','root');
   define('DB_PWD','123456');
   define('DB_NAME','thinkphp');

   $conn = @mysql_connect('DB_HOST,DB_USER,DB_PWD')or die('数据库链接失败：'.mysql_error());
   @mysql_select_db(DB_NAME)or die('数据库错误：'.mysql_error());
   @mysql_query('SET NAMES UTF8')or die('字符集错误:'.mysql_error());
?>

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102972180

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载