jquery melaksanakan paging pertanyaan-Soal Jawab bahagian hadapan-php.cn

Dengan perkembangan industri IT, aplikasi web menjadi semakin popular. Terutama dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat teknologi seperti Internet mudah alih dan data besar, permintaan untuk aplikasi Web juga telah meningkat.

Dalam aplikasi web, pertanyaan dan paparan data adalah salah satu fungsi yang paling penting. Dalam kes jumlah data yang besar, cara membuat pertanyaan dan memaparkan data dengan cepat dan tepat telah menjadi isu yang sangat penting. Paging tradisional tidak lagi dapat memenuhi keperluan pengguna, kerana paging hanya boleh membahagikan data kepada beberapa halaman untuk paparan, dan pengguna perlu membelok halaman untuk melihat semua data.

Untuk meningkatkan kesan pertanyaan pengguna, kami boleh menggunakan beberapa teknologi baharu untuk melaksanakan fungsi halaman pertanyaan. Antaranya, jQuery ialah alat pembangunan web yang sangat popular dengan interaktiviti yang kuat dan kemudahan penggunaan, yang boleh membantu kami melaksanakan aplikasi web yang lebih baik. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi halaman pertanyaan.

1. Keperluan untuk halaman pertanyaan

Apabila jumlah data meningkat, hasil pertanyaan menjadi lebih besar dan lebih besar. Jika anda ingin memaparkan semua data pada halaman sekaligus, ia akan menimbulkan masalah kepada pengguna dari segi kelancaran dan pemerolehan data. Untuk aplikasi dengan jumlah data yang besar, cara biasa adalah untuk menyelesaikan masalah ini melalui halaman.

Kelebihan paging ialah:

Tingkatkan kelajuan pembukaan halaman dan kurangkan beban pada pelayan.
Paparan lebih teratur, memudahkan pengguna melihat dan mengendalikannya.
Paging boleh menanyakan data yang diperlukan dengan tepat dan cepat.
Paging boleh memanfaatkan mekanisme caching penyemak imbas untuk melegakan tekanan pelayan dan mengurangkan penghantaran data.

Namun, paging biasa sering menjadikan laman web membosankan, masa menunggu untuk memuat turun terlalu lama, dan pengalaman pengguna tidak bagus. Oleh itu, pelaksanaan fungsi halaman pertanyaan adalah penting, yang boleh meningkatkan kecekapan pertanyaan pengguna dan pengalaman pengguna.

2. jQuery melaksanakan paging pertanyaan

jQuery ialah perpustakaan berorientasikan JavaScript yang digunakan secara meluas untuk mengoptimumkan dan memproses kod JavaScript. Kaedah menggunakan jQuery untuk melaksanakan kelui pertanyaan agak mudah, dan ia terbahagi terutamanya kepada langkah berikut:

Laksanakan pertanyaan data dan simpan hasil pertanyaan ke dalam tatasusunan.
Jana secara dinamik halaman hasil pertanyaan, kawasan kawalan halaman dan bar status halaman.
Mengikut permintaan pertanyaan pengguna, pilih nod data dan buat nod paging secara dinamik.
Muat semula data paging dan kemas kini halaman secara dinamik mengikut permintaan perubahan halaman pengguna.

Di bawah, kami akan memperkenalkan langkah demi langkah cara menggunakan jQuery untuk melaksanakan fungsi halaman pertanyaan:

Melaksanakan pertanyaan data

Pertama , kita perlu Menyimpan data ke dalam tatasusunan adalah sangat mudah untuk aplikasi web yang ditulis dalam JavaScript. Anda hanya perlu memanggil kaedah parse() JSON untuk menukar rentetan berformat JSON kepada objek JavaScript.

Berikut ialah contoh:

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

Salin selepas log masuk

Penjanaan dinamik elemen halaman

Penjanaan dinamik elemen halaman menggunakan operasi DOM dalam jQuery, terutamanya melalui Kaedah append() dan html() dalam jQuery dilaksanakan. Anda boleh menggunakan kaedah append() untuk menambah nod baharu dan nod anak, dan anda juga boleh menggunakan kaedah html() untuk menukar innerHTML nod.

Berikut ialah contoh:

//动态添加查询结果区域
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'});

Salin selepas log masuk

Mencipta nod paging

Nod paging boleh dibuat secara dinamik melalui jQuery Kaedah click() digunakan di sini. Pantau operasi mengubah halaman pengguna.

Berikut ialah contoh:

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

Salin selepas log masuk

Kemas Kini Halaman

Langkah terakhir ialah mengemas kini data halaman. Kami perlu memuatkan semula data halaman berdasarkan permintaan mengubah halaman pengguna dan mengemas kini halaman secara dinamik. Kaedah addClass() dan removeClass() digunakan di sini untuk menyerlahkan halaman semasa.

Berikut ialah contoh:

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

Salin selepas log masuk

3. Ringkasan

Page pertanyaan ialah salah satu fungsi umum aplikasi web, yang sangat penting apabila memproses sejumlah besar data. . jQuery ialah alat pembangunan web yang sangat popular yang boleh membantu kami melaksanakan fungsi halaman pertanyaan dengan mudah. Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan jQuery untuk melaksanakan fungsi paging pertanyaan, yang melibatkan operasi seperti pertanyaan data, penjanaan dinamik elemen halaman, penciptaan nod paging dan pengemaskinian halaman dinamik.

Menggunakan jQuery untuk melaksanakan paging pertanyaan bukan sahaja meningkatkan interaktiviti dan kemudahan penggunaan aplikasi web, tetapi juga memberikan kami lebih banyak ruang reka bentuk. Dalam aplikasi praktikal, pelaksanaan fungsi halaman pertanyaan juga perlu diselaraskan dan dioptimumkan mengikut keperluan sebenar. Semoga artikel ini bermanfaat kepada pembaca.

Atas ialah kandungan terperinci jquery melaksanakan paging pertanyaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!