jqueryはクエリページングを実装します-フロントエンドQ&A-php.cn

IT 業界の発展に伴い、Web アプリケーションの人気はますます高まっています。特に近年は、モバイルインターネットやビッグデータなどの技術の急速な発展に伴い、Webアプリケーションの需要も高まっています。

Web アプリケーションでは、データのクエリと表示は最も重要な機能の 1 つです。大量のデータの場合、データを迅速かつ正確にクエリして表示する方法が特に重要な問題になります。従来のページングでは、もはやユーザーのニーズを満たすことができません。ページングではデータを複数のページに分割して表示することしかできず、ユーザーはすべてのデータを表示するためにページをめくる必要があるからです。

ユーザーのクエリ効果を向上させるために、いくつかの新しいテクノロジを使用してクエリページング機能を実装できます。その中でも、jQuery は強力な対話性と使いやすさを備えた非常に人気のある Web 開発ツールであり、より優れた Web アプリケーションの実装に役立ちます。この記事ではjQueryを使ってクエリページング機能を実装する方法を紹介します。

1. クエリページングの必要性

データ量が増加するにつれて、クエリ結果はますます大きくなります。ページ上のすべてのデータを一度に表示したい場合、流暢さとデータ取得の点でユーザーに問題が発生します。大量のデータを含むアプリケーションの場合、一般的な方法は、ページングによってこの問題を解決することです。

ページングの利点は次のとおりです。

ページを開く速度が向上し、サーバーの負荷が軽減されます。
表示がより整理され、ユーザーが見やすく、操作しやすくなりました。
ページングは、必要なデータを正確かつ迅速にクエリできます。
ページングはブラウザのキャッシュメカニズムを利用して、サーバーの負荷を軽減し、データ送信を減らすことができます。

しかし、通常のページングでは Web サイトが退屈になったり、ダウンロードの待ち時間が長すぎたり、ユーザーエクスペリエンスが良くないことがよくあります。したがって、クエリページング機能の実装は非常に重要であり、これによりユーザーのクエリ効率とユーザーエクスペリエンスが向上します。

2. jQuery はクエリページングを実装します

jQuery は、JavaScript コードの最適化と処理に広く使用されている JavaScript 指向のライブラリです。 jQuery を使用してクエリページングを実装する方法は比較的単純で、主に次の手順に分かれます。

データクエリを実装し、クエリ結果を配列に格納します。
クエリ結果ページ、ページングコントロール領域、ページングステータスバーを動的に生成します。
ユーザーのクエリ要求に従って、データノードを選択し、ページングノードを動的に作成します。
ユーザーのページめくり要求に応じて、ページングデータをリロードし、ページを動的に更新します。

以下では、jQuery を使用してクエリページング関数を実装する方法を段階的に紹介します。

データクエリを実装する

最初にJavaScript で書かれた Web アプリケーションでは、データを配列に保存するのが非常に簡単です。 JSON の parse() メソッドを呼び出すだけで、JSON 形式の文字列を JavaScript オブジェクトに変換できます。

以下は例です:

let jsonData='[{"name":"张三","age":20,"salary":"5000"},{"name":"李四","age":22,"salary":"6000"},{"name":"王五","age":25,"salary":"8000"},{"name":"赵六","age":27,"salary":"9000"},{"name":"钱七","age":30,"salary":"10000"},{"name":"二哈","age":32,"salary":"12000"},{"name":"三哈","age":35,"salary":"15000"},{"name":"四哈","age":37,"salary":"18000"},{"name":"五哈","age":40,"salary":"20000"},{"name":"六哈","age":42,"salary":"22000"}]';

let data=JSON.parse(jsonData);

ログイン後にコピー

ページ要素の動的生成

ページ要素の動的生成では、主に jQuery で DOM 操作を使用します。 jQuery の append() メソッドと html() メソッドが実装されています。 append() メソッドを使用して新しいノードと子ノードを追加できます。また、html() メソッドを使用してノードの innerHTML を変更することもできます。

次は例です:

//动态添加查询结果区域
let $table=$('<table><thead><tr><th>姓名</th><th>年龄</th><th>薪资</th></tr></thead><tbody></tbody></table>');
$container.append($table);
for(let item of data){
  let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
  $table.find('tbody').append($tr);
}

//动态添加分页控制区域
let $pagerBox=$('<div class="pager-box"></div>');
let $prePage=$('<a href="javascript:void(0);" class="pre-page">上一页</a>');
let $nextPage=$('<a href="javascript:void(0);" class="next-page">下一页</a>');
$pagerBox.append($prePage);
for(let i=1;i<=data.length;i++){
  let $pageNode=$('<a href="javascript:void(0);" class="pager-num">'+i+'</a>');
  $pagerBox.append($pageNode);
}
$pagerBox.append($nextPage);
$container.append($pagerBox);

//动态添加分页状态条
let $pageStatus=$('<div class="page-status"><span class="current-page">1</span>/<span class="total-page">'+Math.ceil(data.length/pageSize)+'页</span></div>');
$container.append($pageStatus);

//定义页面元素的CSS样式
$container.css({'text-align':'center','background-color':'#f7f7f7'});
$table.css({'width':'90%','margin':'0 auto','background-color':'#fff','border':'1px solid #ddd','border-radius':'5px'});
$table.find('thead th').css({'padding-top':'10px','padding-bottom':'10px','background-color':'#eee'});

$pagerBox.css({'width':'90%','margin':'20px auto','height':'30px','line-height':'30px'});
$pagerBox.find('.pager-num').css({'width':'30px','text-align':'center','background-color':'#fff','border':'1px solid #ddd','border-radius':'3px','margin':'0 5px'});
$pagerBox.find('.pager-num.active').css({'background-color':'#e4393c','color':'#fff'});
$pagerBox.find('.pre-page,.next-page').css({'display':'inline-block','color':'#333','text-decoration':'none','margin':'0 5px'});

$pageStatus.css({'width':'90%','margin':'10px auto','color':'#999','font-size':'14px'});

ログイン後にコピー

ページングノードの作成

jQuery を通じて、ページングノードを動的に作成できます。click() メソッドは次のとおりです。ユーザーのページめくり操作を監視します。

これは例です:

let $pagerNodes=$('.pager-num');
$pagerNodes.eq(0).addClass('active');
$pagerNodes.click(function(){
  let index=$(this).index();
  let start=(index-1)*pageSize;
  let end=index*pageSize;
  let dataArr=data.slice(start,end);
  $table.find('tbody').html('');
  for(let item of dataArr){
    let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
    $table.find('tbody').append($tr);
  }
  $pagerNodes.removeClass('active');
  $(this).addClass('active');
  $pageStatus.find('.current-page').text(index);
});

ログイン後にコピー

ページの更新

最後のステップは、ページデータを更新することです。ユーザーのページめくりリクエストに応じてページングデータをリロードし、ページを動的に更新する必要があります。ここでは、addClass() メソッドとremoveClass() メソッドを使用して、現在のページを強調表示します。

次は例です:

let currentPage=1;
$prePage.click(function(){
  if(currentPage>1){
    currentPage--;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

$nextPage.click(function(){
  if(currentPage<Math.ceil(data.length/pageSize)){
    currentPage++;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

ログイン後にコピー

3. 概要

クエリページングは Web アプリケーションの一般的な機能の 1 つであり、大量のデータを処理する場合に非常に重要です。データ。 jQuery は、クエリページング機能を簡単に実装できる非常に人気のある Web 開発ツールです。この記事の導入を通じて、jQuery を使用してクエリページング機能を実装する方法を学びました。これには、データクエリ、ページ要素の動的生成、ページングノードの作成、動的ページ更新などの操作が含まれます。

jQuery を使用してクエリページングを実装すると、Web アプリケーションの対話性と使いやすさが向上するだけでなく、より多くの設計スペースが提供されます。実際のアプリケーションでは、クエリページング機能の実装も実際のニーズに応じて調整および最適化する必要があります。この記事が読者のお役に立てば幸いです。

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