페이징 효과를 얻기 위해 express와 결합된 jq Paginator-JS 튜토리얼-php.cn

페이징 효과를 얻기 위해 express와 결합된 jq Paginator

小云云

풀어 주다： 2018-01-17 15:10:40

원래의

1737명이 탐색했습니다.

이 글은 Express와 결합된 jqPaginator를 사용한 페이징 표시 콘텐츠의 효과를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

이전에 작성됨

페이징 내용도 페이지 개발에서 자주 접하는 요구 사항입니다
프론트 엔드 페이지는 jquery 플러그인 jqPaginator를 사용하여 작성됩니다.
백엔드는 mysql을 사용하여 데이터를 저장합니다

입력 시작 코드

SQL 지식 검토

먼저 sql 문을 검토해 보겠습니다. 데이터 테이블의 특정 항목만 쿼리하고 제한을 사용하여

select * from table name 제한 [오프셋]을 구현하려고 합니다. ,]rows

이중 Limit 뒤에는 두 개의 매개변수가 올 수도 있고 하나의 매개변수가 올 수도 있습니다.
행을 나타내는 매개변수(오프셋=0에 해당) 다음에 데이터 테이블의 첫 번째 레코드부터 시작하는 행 데이터를 쿼리합니다.
두 개의 매개변수를 사용하면 첫 번째 매개변수는 0부터 시작하는 오프셋이고, 두 번째 매개변수는 쿼리하려는 레코드 수를 나타냅니다.

페이징 스트립을 작성하려면 뛰어난 jquery 페이징 플러그인인 jqPaginator를 사용하세요

참고: 이 페이징은 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>

로그인 후 복사

여기에 편리하게 넣을 수 있습니다. 페이징 버튼

백엔드 코드

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下一页阅读全文

로그인 후 복사

작성

웹팩+익스프레스 다중 페이지 사이트 개발 사례에 대한 자세한 설명

위 내용은 페이징 효과를 얻기 위해 express와 결합된 jq Paginator의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!