Plugin Básico de jQuery EasyUIPagination (Paginación)

jQuery EasyUI 插件Plugins de jQuery EasyUI

Reescriba los valores predeterminados a través de $.fn.pagination.defaults.

La paginación permite a los usuarios navegar por los datos mediante el cambio de páginas. Admite opciones configurables para la navegación de páginas y la selección de la longitud de página. Los usuarios pueden añadir botones personalizados a la derecha de la paginación para ampliar su funcionalidad.

Dependencias

  • linkbutton

Uso

Cree la paginación mediante marcado.

<div id="pp" class="easyui-pagination" style="background:#EFEFEF;border:1px solid #ccc;"
    data-options="total:2000,pageSize:10">
</div>

Cree la paginación usando JavaScript.

<div id="pp" style="background:#EFEFEF;border:1px solid #ccc;"></div>

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

Vamos a crear una paginación ajax mediante los plugins panel y pagination. Cuando el usuario selecciona una nueva página, el panel mostrará el contenido correspondiente a esa página.

<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'show_content.php?page=1'">
</div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
    data-options="
    total: 2000,
    pageSize: 10,
    onSelectPage: function(pageNumber, pageSize){
    $('#content').panel('refresh', 'show_content.php?page='+pageNumber);
    }">
</div>

El panel superior muestra por defecto el contenido de la primera página. Cuando el usuario navega por las páginas, se dispara el evento 'onSelectPage', que llama al método 'refresh' del panel de contenido para cargar el contenido de la nueva página con un nuevo parámetro de URL.

Propiedades

Nombre Tipo Descripción Valor predeterminado
total number Total de registros, debe establecerse al crear la paginación. 1
pageSize number Tamaño de página. (Nota: número máximo de registros mostrados por página.) 10
pageNumber number Número de página mostrado al crear la paginación. 1
pageList array El usuario puede cambiar el tamaño de página. La propiedad pageList define los tamaños a los que se puede cambiar.
Ejemplo de código:
$('#pp').pagination({
    pageList: [10,20,50,100]
});
[10,20,30,50]
loading boolean Define si los datos se están cargando. false
buttons array,selector Define botones personalizados; valores posibles:
1. Un array; cada botón contiene dos propiedades:
iconCls: clase CSS que mostrará una imagen de fondo.
handler: función de manejo cuando se hace clic en el botón.
2. Un selector que indica el botón.

Los botones pueden declararse mediante marcado:
<div class="easyui-pagination" style="border:1px solid #ccc" data-options="
        total: 114,
        buttons: [{
            iconCls:'icon-add',
            handler:function(){alert('add')}
        },'-',{
            iconCls:'icon-save',
            handler:function(){alert('save')}
        }]">
</div>
Los botones también pueden crearse usando JavaScript:
$('#pp').pagination({
    total: 114,
    buttons: [{
        iconCls:'icon-add',
        handler:function(){alert('add')}
    },'-',{
        iconCls:'icon-save',
        handler:function(){alert('save')}
    }]
});
null
layout array Definición del diseño de la paginación. Esta propiedad está disponible desde la versión 1.3.5.
Los elementos de diseño incluyen uno o más de los siguientes valores:
1. list: lista de tamaños de página.
2. sep: separador de botones de página.
3. first: primer botón.
4. prev: botón anterior.
5. next: botón siguiente.
6. last: último botón.
7. efresh: botón de actualizar.
8. manual: campo de entrada manual de número de página.
9. links: enlaces de números de página.

Ejemplo de código:
$('#pp').pagination({
    layout:['first','links','last']
});
links number Cantidad de enlaces; solo es válida si el elemento 'links' está incluido en 'layout'. Esta propiedad está disponible desde la versión 1.3.5. 10
showPageList boolean Define si se muestra la lista de páginas. true
showRefresh boolean Define si se muestra el botón de actualizar. true
beforePageText string Muestra la etiqueta antes del componente input. Page
afterPageText string Muestra la etiqueta después del componente input. of {pages}
displayMsg string Display a page information. Muestra la información de página: {from} a {to} de {total}.

Eventos

Nombre Parámetros Descripción
onSelectPage pageNumber, pageSize Se dispara cuando el usuario selecciona una nueva página. La función callback contiene dos parámetros:
pageNumber: el nuevo número de página.
pageSize: el nuevo tamaño de página.

Ejemplo de código:
$('#pp').pagination({
    onSelectPage:function(pageNumber, pageSize){
        $(this).pagination('loading');
        alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
        $(this).pagination('loaded');
    }
});
onBeforeRefresh pageNumber, pageSize Se dispara antes de hacer clic en el botón de actualizar; devolver false cancela la acción de actualizar.
onRefresh pageNumber, pageSize Se dispara después de la actualización.
onChangePageSize pageSize Se dispara cuando el usuario cambia el tamaño de página.

Métodos

Nombre Parámetros Descripción
options none Devuelve el objeto de opciones (options).
loading none Pone la paginación en estado de carga (loading).
loaded none Pone la paginación en estado cargado (loaded).
refresh options Actualiza y muestra la información de paginación. Este método está disponible desde la versión 1.3.
Ejemplo de código:
$('#pp').pagination('refresh');    // 刷新分页栏信息
$('#pp').pagination('refresh',{    // 改变选项，并刷新分页栏信息
    total: 114,
    pageNumber: 6
});
select page Selecciona una nueva página. El índice de páginas comienza en 1. Este método está disponible desde la versión 1.3.
Ejemplo de código:
$('#pp').pagination('select');    // 刷新当前页面
$('#pp').pagination('select', 2);    // 选择第二页
jQuery EasyUI 插件Plugins de jQuery EasyUI Otras extensiones