Excelテーブルのページング表示をjqueryで実装する方法-フロントエンドQ&A-php.cn

Excelテーブルのページング表示をjqueryで実装する方法

PHPz

リリース： 2023-04-06 10:13:18

オリジナル

755 人が閲覧しました

今日の情報化時代において、スプレッドシートはあらゆる分野で不可欠なツールの 1 つとなっています。これらのスプレッドシートでは、保存されているデータの量が多すぎるため、ユーザーが使いやすくするために、通常はページングを使用してデータを表示およびクエリします。では、jQueryを使ってExcelテーブルのページング表示を素早く実現するにはどうすればよいでしょうか？この記事ではそれについて詳しく説明します。

1. ページングプラグインの導入

ページング機能を実現するには、まずページングの表示をサポートする jQuery プラグインを導入する必要があります。 jPaginator プラグイン。 jPaginator プラグインは以下の方法で導入します。

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

ログイン後にコピー

このうち、jPaginator の CSS ファイルはこのプラグインのスタイルファイルとなるため必須です。

2. テーブルデータ形式

Excel テーブルを表示する前に、テーブルデータを JSON 形式で保存し、フォーマットする必要があります。以下はテーブルデータの形式の例です。

{
    "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": "重庆江北"},
        ...
    ]
}

ログイン後にコピー

フィールド total はデータの総量を格納するために使用され、data フィールドはページ分割されたデータを格納する配列。

3. ページングプラグインの初期化

jPaginator プラグインのコードを導入した後、テーブルデータと一致するように初期化する必要があります。初期化コードは次のとおりです。

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

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

ログイン後にコピー

次に、ページングデータを取得するために、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);  // 更新表格数据
        }
    });
}

ログイン後にコピー

4. テーブルデータの更新

ページングデータを正常に取得したら、それをテーブルに更新する必要があります。ここでは、次のコードを使用してテーブルの 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;
}

ログイン後にコピー

テーブルの HTML コードを構築した後、それをページに追加する必要があります。次のコードを使用してテーブルを更新します。

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

ログイン後にコピー

5. まとめ

上記のコード実装により、jQuery を介して Excel テーブルのページング表示機能を迅速に実装できます。このうち、jPaginatorを利用するとページング機能を素早く実装でき、jQueryの$.ajax()メソッドを利用するとページングデータを素早く取得できます。この記事で紹介した内容が、多くの開発者の開発プロセスに役立つことを願っています。

以上がExcelテーブルのページング表示をjqueryで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。