utilisation du plug-in de pagination jquery

Avec le développement continu d'Internet, il est de plus en plus courant que les sites Web affichent de grandes quantités de données. Lors de l'affichage de ces données, des opérations de pagination sont souvent nécessaires. Afin de faciliter la mise en œuvre de la fonction de pagination par les développeurs, jQuery fournit un puissant plug-in de pagination-plug-in de pagination jQuery.

Le plug-in de pagination jQuery est un plug-in léger et facile à utiliser qui est utilisé pour implémenter rapidement la fonction de pagination des données de pages Web. Cela peut nous aider à changer facilement de données tout en permettant aux utilisateurs de parcourir les données plus facilement. Ci-dessous, nous présenterons l'utilisation spécifique du plug-in de pagination jQuery.

1. Introduction au plug-in

Tout d'abord, avant d'utiliser le plug-in de pagination jQuery, nous devons présenter le fichier jQuery et le fichier du plug-in. Le plug-in de pagination jQuery peut être introduit dans la page Web via le code suivant :

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jQuery-Pagination/1.4.2/jquery.pagination.min.js"></script>

2. Code HTML

Ensuite, préparez les données qui doivent être paginées dans notre page Web et enveloppez-les dans une balise div :

<div id="pageContent">
    <div>第一页数据……</div>
    <div>第二页数据……</div>
    <div>第三页数据……</div>
    <div>第四页数据……</div>
    <div>第五页数据……</div>
    <div>第六页数据……</div>
</div>

3. Code JavaScript

Ensuite, dans le code javascript, nous pouvons utiliser le code suivant pour initialiser le plug-in de pagination :

$('#pageContent').pagination({
    totalPage: 6, // 数据总页数
    current: 1, // 当前页码
    displayPage: 5, // 显示页码数量
    mode: 'fixed', // 分页模式，可选值为'fixed'或'scroll'
    callback: function (page) { // 回调函数，每当用户点击页码时被触发
        // 获取当前页码
        console.log(page);
        // 实现数据切换
    }
});

Ici, nous devons spécifier des paramètres tels que le nombre total de pages de données, le le numéro de page actuel, le nombre de numéros de page affichés et le mode de pagination. Parmi eux, la fonction de rappel est déclenchée lorsque l'utilisateur clique sur le numéro de page et la fonction de commutation de données peut être appelée.

4. Paramètres de style

Enfin, nous pouvons définir le style du plug-in de pagination pour mieux s'adapter aux besoins de la page Web. Par exemple, le style par défaut peut être modifié via le code suivant :

.pagination {
    margin-top: 10px;
    text-align: center;
}
.pagination li {
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: 5px;
    padding: 5px 10px;
    transition: all .3s ease;
}
.pagination li.active {
    background-color: #f00;
    color: #fff;
    border-color: #f00;
    cursor: default;
}

Ici, nous utilisons CSS pour définir les styles de marges, de centrage et de numéro de page du plug-in de pagination.

Résumé :

En utilisant le plug-in de pagination jQuery, nous pouvons facilement réaliser l'affichage de la pagination et la commutation des données de la page Web. Lors de l'utilisation, nous devons spécifier des paramètres tels que le nombre total de pages de données, le numéro de page actuel, le nombre de numéros de page affichés et la fonction de rappel. En même temps, le style du plug-in peut être modifié. via CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!