Comment implémenter l'affichage de pagination d'un tableau Excel avec jquery-Questions et réponses frontales-php.cn

Comment implémenter l'affichage de pagination d'un tableau Excel avec jquery

PHPz

Libérer： 2023-04-06 10:13:18

original

756 Les gens l'ont consulté

À l'ère de l'information d'aujourd'hui, les feuilles de calcul sont devenues l'un des outils indispensables dans tous les domaines. Dans ces feuilles de calcul, la quantité de données stockées étant trop importante, afin de faciliter l'utilisation par l'utilisateur, nous utilisons généralement la pagination pour afficher et interroger les données. Alors, comment réaliser rapidement un affichage paginé de tableaux Excel via jQuery ? Cet article vous l’expliquera en détail.

1. Introduction du plug-in de pagination

Afin d'implémenter la fonction de pagination, nous devons d'abord introduire un plug-in jQuery qui prend en charge l'affichage de la pagination. Ici, nous choisissons d'utiliser le plug-in jPaginator. Présentez le plug-in jPaginator de la manière suivante :

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jPaginator.js"></script>
<link rel="stylesheet" href="path/to/jPaginator.css" />

Copier après la connexion

Parmi eux, le fichier CSS de jPaginator est indispensable car c'est le fichier de style de ce plug-in.

2. Format des données du tableau

Avant d'afficher le tableau Excel, nous devons stocker les données du tableau au format JSON et les formater. Voici un exemple du format des données du tableau :

{
    "total": 50, 
    "data": [
        {"Name": "张三", "Age": "18", "Sex": "男", "Address": "湖南长沙"}, 
        {"Name": "李四", "Age": "19", "Sex": "女", "Address": "广东深圳"}, 
        {"Name": "王五", "Age": "20", "Sex": "男", "Address": "北京朝阳"}, 
        {"Name": "赵六", "Age": "21", "Sex": "女", "Address": "上海浦东"}, 
        {"Name": "刘七", "Age": "22", "Sex": "男", "Address": "重庆江北"},
        ...
    ]
}

Copier après la connexion

Le champ total est utilisé pour stocker la quantité totale de données, et le champ data est un tableau qui stocke les données paginées. total用来存储总数据量，data字段则是存储分页后的数据的数组。

三、分页插件的初始化

在引入jPaginator插件的代码之后，我们需要对其进行初始化设置，使其能够与我们的表格数据相匹配。初始化代码如下：

// 定义分页数据，total为数据总量，perPage为每页显示的数量
var paginationData = {
    total: 0,
    perPage: 10,
    currentPage: 1,
    pageRange: 5,
    onPageClicked: function (pageIndex, event) {
        // 在这里调用ajax函数获取分页数据并更新表格
    }
};

// 调用jPaginator
$(".pagination").jPaginator(paginationData);

Copier après la connexion

接下来，我们需要在onPageClicked方法中设置ajax调用方式，以获取分页后的数据。此处我们使用jQuery的$.ajax()方法进行调用，并将分页数据传递给后台服务。

onPageClicked: function (pageIndex, event) {
    $.ajax({
        url: "http://localhost:8000/getPageData",
        dataType: "json",
        type: "GET",
        data: {
            page: pageIndex,  // 当前页码
            perPage: this.options.perPage  // 每页显示的数量
        },
        success: function (data) {
            showPageData(data);  // 更新表格数据
        }
    });
}

Copier après la connexion

四、更新表格数据

在成功获取到分页数据后，我们需要将其更新到表格中。这里我们使用以下代码来构建表格的HTML代码：

function buildTableHtml(data) {
    var html = "<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>住址</th></tr></thead><tbody>";
    for (var i = 0, length = data.length; i < length; i++) {
        html += "<tr>" +
                "<td>" + data[i].Name + "</td>" +
                "<td>" + data[i].Age + "</td>" +
                "<td>" + data[i].Sex + "</td>" +
                "<td>" + data[i].Address + "</td>" +
                "</tr>";
    }
    html += "</tbody></table>";
    return html;
}

Copier après la connexion

在构建完成表格的HTML代码后，我们需要将其添加到页面上。使用以下代码来更新表格：

function showPageData(data) {
    var tableHtml = buildTableHtml(data);
    $(".table-wrapper").html(tableHtml);
}

Copier après la connexion

五、总结

通过上述的代码实现，我们可以快速的通过jQuery来实现Excel表格的分页显示功能。其中，jPaginator的使用可以快速的实现分页功能的搭建，而使用jQuery的$.ajax()

3. Initialisation du plug-in de pagination🎜🎜Après avoir introduit le code du plug-in jPaginator, nous devons l'initialiser pour qu'il puisse correspondre aux données de notre table. Le code d'initialisation est le suivant : 🎜rrreee🎜 Ensuite, nous devons définir la méthode d'appel ajax dans la méthode onPageClicked pour obtenir les données paginées. Ici, nous utilisons la méthode $.ajax() de jQuery pour effectuer l'appel et transmettre les données de pagination au service d'arrière-plan. 🎜rrreee🎜4. Mettre à jour les données du tableau🎜🎜Après avoir obtenu avec succès les données de pagination, nous devons les mettre à jour dans le tableau. Ici, nous utilisons le code suivant pour construire le code HTML du tableau : 🎜rrreee🎜Après avoir construit le code HTML du tableau, nous devons l'ajouter à la page. Utilisez le code suivant pour mettre à jour le tableau : 🎜rrreee🎜 5. Résumé 🎜🎜Grâce à l'implémentation du code ci-dessus, nous pouvons rapidement implémenter la fonction d'affichage de pagination du tableau Excel via jQuery. Parmi eux, l'utilisation de jPaginator peut implémenter rapidement la fonction de pagination, et l'utilisation de la méthode $.ajax() de jQuery peut obtenir rapidement des données de pagination. J'espère que le contenu présenté dans cet article pourra être utile à la majorité des développeurs dans le processus de développement. 🎜

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!