jqueryを使用してページングクエリデータを実装する-フロントエンドQ&A-php.cn

jqueryを使用してページングクエリデータを実装する

王林

リリース： 2023-05-14 12:32:38

オリジナル

779 人が閲覧しました

Web テクノロジーの継続的な発展に伴い、ページングデータクエリの機能をサポートする必要がある Web サイトが増えています。 jQuery は、開発者が DOM、イベント、アニメーションなどをより便利に操作できるようにする非常に人気のある JavaScript ライブラリであるため、jQuery を使用してページングクエリデータを実装することは良い選択です。

この記事では、jQuery を使用してページングクエリデータを実装する基本原則、手順、コード実装方法を紹介し、読者の参考となる簡単な例を示します。

1. 基本原則

jQuery を使用してページングクエリデータを実装する基本原則は、AJAX テクノロジを通じて非同期リクエストをバックグラウンドに送信し、表示する必要があるデータを取得し、ページ上に表示します。実装プロセスでは、次のテクノロジを使用する必要があります。

AJAX テクノロジ: jQuery の AJAX メソッドを使用して、非同期リクエストをバックグラウンドに送信し、表示する必要があるデータを取得します。
ページングアルゴリズム: バックグラウンドに表示されるデータを計算し、現在のページ番号と各ページに表示されるレコード数に基づいて、表示されるデータの開始位置と量を決定します。
HTML、CSS、JavaScript: jQuery を使用して DOM 要素を操作し、ページングコントロールを動的に生成し、ページング関数を実装します。

2. 手順

jQuery を使用してページングクエリデータを実装する基本的な手順は次のとおりです:

データを表示する DIV 要素を定義します。これはデータを照会し、要素の ID を設定する必要があります。
非同期リクエストをバックグラウンドに送信し、取得したデータを指定した DIV 要素に表示する JavaScript 関数を定義します。
ページングコントロールを生成し、ページングコントロールの各ボタンにイベントリスナーを設定する JavaScript 関数を定義します。
ページが読み込まれた後、上記の 2 つの関数を呼び出して、最初のページのデータとページングコントロールを表示します。
ユーザーがページングコントロールのボタンをクリックすると、最初の関数が呼び出され、指定されたページ番号のデータが取得され、指定された DIV 要素に表示されます。

3. コードの実装

次は、jQuery を使用してページングクエリデータを実装する簡単なコード例です:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页查询数据示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="paging.js"></script>
    <link rel="stylesheet" href="paging.css">
</head>
<body>
<div id="data"></div>
<div id="paging"></div>
<script>
    $(document).ready(function() {
        // 显示第一页数据和分页控件
        getDataWithPage(1);
        generatePaging(1);
        
        // 为分页控件上的按钮添加事件监听器
        $('#paging').on('click', '.page-btn', function() {
            var page = parseInt($(this).data('page'));
            getDataWithPage(page);
            generatePaging(page);
        });
    });
</script>
</body>
</html>

ログイン後にコピー

/*
 * 分页查询数据相关的 JavaScript 函数
 */

var PAGE_SIZE = 10;         // 每页显示的记录数
var TOTAL_PAGES = 20;       // 总页数（假设为 20）

// 向后台发送异步请求，获取指定页码的数据，并将其显示在指定的 DIV 元素中
function getDataWithPage(page) {
    var startIndex = (page - 1) * PAGE_SIZE + 1;
    var endIndex = startIndex + PAGE_SIZE - 1;
    $.ajax({
        url: 'data.php',        // 后台数据接口 URL
        method: 'GET',
        data: {
            startIndex: startIndex,
            endIndex: endIndex
        },
        success: function(data) {
            // 将获取到的数据显示在指定的 DIV 元素中
            $('#data').html(data);
        },
        error: function() {
            alert('获取数据失败');
        }
    });
}

// 生成分页控件，并为分页控件的每个按钮设置事件监听器
function generatePaging(currentPage) {
    var pagingHTML = '<ul>';
    if (currentPage == 1) {
        pagingHTML += '<li><span class="disabled">上一页</span></li>';
    } else {
        pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage - 1) + '">上一页</a></li>';
    }
    for (var i = 1; i <= TOTAL_PAGES; i++) {
        if (i === currentPage) {
            pagingHTML += '<li><span class="current">' + i + '</span></li>';
        } else {
            pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + i + '">' + i + '</a></li>';
        }
    }
    if (currentPage == TOTAL_PAGES) {
        pagingHTML += '<li><span class="disabled">下一页</span></li>';
    } else {
        pagingHTML += '<li><a href="javascript:void(0);" class="page-btn" data-page="' + (currentPage + 1) + '">下一页</a></li>';
    }
    pagingHTML += '</ul>';
    $('#paging').html(pagingHTML);
}

ログイン後にコピー

/*
 * 分页控件相关的 CSS 样式
 */

#paging ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#paging ul li {
    display: inline-block;
    margin: 0 5px;
    padding: 0;
}

#paging ul li span {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    cursor: default;
}

#paging ul li a {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    text-decoration: none;
}

#paging ul li a:hover {
    background-color: #f5f5f5;
}

#paging ul li .current {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    color: #333;
    cursor: default;
}

#paging ul li .disabled {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #bbb;
    cursor: default;
}

ログイン後にコピー

上記のコードは、これは単純な例であり、実際のアプリケーションでは実際の条件に応じて調整および最適化する必要があります。同時に、SQL インジェクションやその他の攻撃を回避するために、バックグラウンドデータインターフェイスの通常の動作とデータセキュリティを確保することも必要です。

以上がjqueryを使用してページングクエリデータを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。