Rumah hujung hadapan web tutorial js jq Paginator结合express实现分页效果

jq Paginator结合express实现分页效果

Jan 17, 2018 pm 03:10 PM
express paginator penomboran

本文主要为大家详细介绍了jqPaginator结合express实现分页展示内容效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

写在前面的话

分页展示内容也是我们在页面开发中经常会遇到的需求
前端页面利用jqPaginator这个jquery插件来编写
后端利用mysql存储数据

开始敲代码

回顾sql知识

首先让我们回顾一下sql语句,我们只想查询出数据表里的某几条用limit实现

select * from 表名 limit [offset,] rows

其中,limit后面可以跟两个参数,也可以跟一个参数。
跟一个参数表示rows,相当于offset=0,从数据表中的第一条记录开始查询出rows条数据。
跟两个参数的话,第一个是从0开始的偏移量,第二个参数表示想查询出来的记录数。

利用jqPaginator这个优秀的jquery分页插件编写一个分页条

注意:这个分页是基于bootstrap3.1.1写出来的


<!DOCTYPE html>
<html>
 <head>
 <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
 </head>
 <body>
 <p style="text-align: center;">
  <ul class="pagination" id="pagination1"></ul>
 </p>
 
 </body>
 <script src="/javascripts/jquery.min.js"></script>
 <script src="/javascripts/jqPaginator.js"></script>
 <script>
 $.jqPaginator(&#39;#pagination1&#39;, {
  totalPages: 100,
  visiblePages: 3,
  currentPage: 1,
  onPageChange: function (num, type) {
   if (type == &#39;change&#39;) {
     //这里是点击分页的回调
   }
  }
 });
 

 </script>
</html>
Salin selepas log masuk


这里我们可以方便的把分页按钮写出来

后台代码


router.get(&#39;/pages&#39;, function (req, res, next) {
  // res.json({"name": 123});
  var page = req.query.page;
  var page = (--page)*5;
  var connection = mysql.createConnection({
    host: &#39;127.0.0.1&#39;,
    port: 3306,
    user: &#39;root&#39;,
    password: &#39;root&#39;,
    database: &#39;vr02&#39;
  });
  connection.connect(function(err) {
    if (err) {
      throw err;
    }
    console.log(&#39;连接数据库成功&#39;);
  });
  connection.query(&#39;select * from user limit ?, 5&#39;,当前1/2页 12下一页阅读全文
Salin selepas log masuk

相关推荐:

简单实现Ajax无刷新分页效果

php实现分页效果的示例

webpack+express多页站点开发实例详解

Atas ialah kandungan terperinci jq Paginator结合express实现分页效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman Sep 20, 2023 am 11:28 AM

Pembangunan PHP: Bagaimana untuk melaksanakan fungsi pengisihan data jadual dan halaman Dalam pembangunan web, memproses sejumlah besar data adalah tugas biasa. Untuk jadual yang perlu memaparkan sejumlah besar data, biasanya perlu melaksanakan fungsi pengisihan dan halaman untuk memberikan pengalaman pengguna yang baik dan mengoptimumkan prestasi sistem. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pengisihan dan halaman data jadual, dan memberikan contoh kod khusus. Fungsi pengisihan melaksanakan fungsi pengisihan dalam jadual, membolehkan pengguna mengisih dalam tertib menaik atau menurun mengikut medan yang berbeza. Berikut ialah borang pelaksanaan

Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod Mar 28, 2023 pm 07:28 PM

Bagaimana untuk mengendalikan muat naik fail? Artikel berikut akan memperkenalkan kepada anda cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod saya harap ia akan membantu anda!

Bagaimana untuk membuat penomboran tersuai dalam CakePHP? Bagaimana untuk membuat penomboran tersuai dalam CakePHP? Jun 04, 2023 am 08:32 AM

CakePHP ialah rangka kerja PHP yang berkuasa yang menyediakan pembangun dengan banyak alat dan ciri berguna. Salah satu daripadanya ialah penomboran, yang membantu kami membahagikan sejumlah besar data kepada beberapa halaman, menjadikan penyemakan imbas dan manipulasi lebih mudah. Secara lalai, CakePHP menyediakan beberapa kaedah penomboran asas, tetapi kadangkala anda mungkin perlu mencipta beberapa kaedah penomboran tersuai. Artikel ini akan menunjukkan kepada anda cara membuat penomboran tersuai dalam CakePHP. Langkah 1: Cipta kelas penomboran tersuai Pertama, kita perlu mencipta kelas penomboran tersuai. ini

Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual Jun 16, 2023 am 10:00 AM

Apabila data terus berkembang, paparan jadual menjadi lebih sukar. Selalunya, jumlah data dalam jadual adalah sangat besar sehingga ia menjadi lambat untuk dimuatkan dan pengguna perlu sentiasa menyemak imbas halaman untuk mencari data yang mereka inginkan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan paparan bernombor bagi data jadual, menjadikannya lebih mudah untuk pengguna mencari data yang mereka inginkan. 1. Buat jadual secara dinamik Untuk menjadikan fungsi paging lebih terkawal, jadual perlu dibuat secara dinamik. Dalam halaman HTML, tambahkan elemen jadual yang serupa dengan yang di bawah.

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Oct 20, 2023 pm 06:19 PM

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Dengan perkembangan Internet, semakin banyak laman web menggunakan jadual untuk memaparkan data. Dalam sesetengah kes di mana jumlah data adalah besar, data perlu dipaparkan dalam halaman untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi halaman jadual dan menyediakan contoh kod khusus. 1. Struktur HTML Pertama, kita perlu menyediakan struktur HTML untuk mengehoskan jadual dan butang paging. Kita boleh menggunakan &lt;tab

Penjelasan terperinci tentang prinsip pemalam paging MyBatis Penjelasan terperinci tentang prinsip pemalam paging MyBatis Feb 22, 2024 pm 03:42 PM

MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik yang menyokong operasi pangkalan data berdasarkan XML dan anotasi Ia mudah dan mudah digunakan, dan juga menyediakan mekanisme pemalam yang kaya. Antaranya, pemalam paging adalah salah satu pemalam yang lebih kerap digunakan. Artikel ini akan menyelidiki prinsip pemalam paging MyBatis dan menggambarkannya dengan contoh kod khusus. 1. Prinsip pemalam paging MyBatis sendiri tidak menyediakan fungsi paging asli, tetapi anda boleh menggunakan pemalam untuk melaksanakan pertanyaan paging. Prinsip pemalam paging adalah terutamanya untuk memintas MyBatis

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Oct 24, 2023 pm 01:10 PM

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen antara muka yang ringkas dan cantik serta pengalaman interaktif yang kaya. Semasa pembangunan, kita sering menghadapi situasi di mana kita perlu memaparkan sejumlah besar data dan melakukan paging. Berikut adalah contoh halaman paparan data dengan fungsi paging yang dibangunkan menggunakan Layui. Pertama, kita perlu memperkenalkan fail dan kebergantungan berkaitan Layui. Tambahkan kod berikut pada teg &lt;head&gt;

Amalan komponen Vue: pembangunan komponen halaman Amalan komponen Vue: pembangunan komponen halaman Nov 24, 2023 am 08:56 AM

Amalan komponen Vue: Pengenalan kepada pembangunan komponen halaman Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod. Teknologi tindanan Vue.js2.xJavaScript (ES6) HTML5 dan persekitaran pembangunan CSS3

See all articles