jqueryはクエリページングを実装します

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

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

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

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

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

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

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

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

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

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

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

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

1. データ クエリを実装する

最初に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);

2. ページ要素の動的生成

ページ要素の動的生成では、主に 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'});

3. ページング ノードの作成

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);
});

4. ページの更新

最後のステップは、ページ データを更新することです。ユーザーのページめくりリクエストに応じてページング データをリロードし、ページを動的に更新する必要があります。ここでは、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 サイトの他の関連記事を参照してください。