欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap-paginator服務(wù)器端分頁使用方法詳解

 更新時間:2020年02月13日 15:14:03   作者:捂汗縣長  
這篇文章主要為大家詳細(xì)介紹了bootstrap-paginator服務(wù)器端分頁的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了bootstrap-paginator服務(wù)器端分頁的基本用法,供大家參考,具體內(nèi)容如下

HTML:

<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-paginator.min.js"></script>

 <!-- 主內(nèi)容列表 -->
 <ol class="list-group" id="infoList>
  <li class="list-group-item"><span class="fa fa-cog fa-spin fa-fw"></span>正在讀取數(shù)據(jù)……</li>
</ol>

<!-- 分頁導(dǎo)航器 -->
<div style="text-align:center;">
  <ul id="useroption" class="pagination"></ul>
</div>

JS:

//讀取消息列表*************************************************//
 queryInfoList(paraValue);
 function queryInfoList(bid)
 {
  $.ajax({
   async: true,
   type: "get",
   url: "../php/list.php",//向后端發(fā)送請求,后端為PHP
   dataType: "json", //要求后端返回數(shù)據(jù)為JSON格式
   data: { page: '1',bid:bid,act:'getInfoList' }, //請求參數(shù),首次請求頁碼為1
   cache: false,
   success: function (data)
   {
    
    lis = "";
    for (eachRs in data.rs)
    {//拼接對應(yīng)<li>需要的值
     lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";
    };
    $("#infoList").html(lis);

    var currentPage = data.CurrentPage; //當(dāng)前頁數(shù)
    var pageCount = data.pageCount; //總頁數(shù)
  
    var options = {
     bootstrapMajorVersion: 4, //版本
     currentPage: currentPage, //當(dāng)前頁數(shù)
     totalPages: pageCount, //總頁數(shù)
     numberOfPages: 10,//分頁器顯示10條
     shouldShowPage: true,//是否顯示該按鈕
     itemTexts: function (type, page, current)
     {
      switch (type)
      {
       case "first":
        return "首頁";
       case "prev":
        return "上頁";
       case "next":
        return "下頁";
       case "last":
        return "末頁";
       case "page":
        return page;
      }
     },
     
     //點(diǎn)擊事件,用于通過Ajax來刷新整個list列表
     onPageClicked: function (event, originalEvent, type, page)
     {
      $.ajax({
       async: true,
       url: "../php/list.php",
       type: "get",
       dataType: "json",
       data: { page: page,bid:bid ,act:'getInfoList'},
       cache: false,
       success: function (data)
       {
        lis = "";
        for (eachRs in data.rs)
        {//拼接對應(yīng)<li>需要的值
         lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";
        };
        $("#infoList").html(lis);
       }/*success*/
      });
     }
    };
    $('#useroption').bootstrapPaginator(options);
   }/*success*/
  });
 }

PHP:

if($act=='getInfoList')
{
 $bid=addslashes($_REQUEST['bid']);
 $curPage=addslashes($_REQUEST['page']);//當(dāng)前頁碼
 $pageSize=15; //每頁條數(shù)
 $rsAll=$dbh->query("select count(id) from article where board=$bid and wid=30 and auditor is not null and accessable=1")->fetchAll();
 $rsAllCount=$rsAll[0][0];//總記錄數(shù)

 //計算總頁數(shù)
 if($rsAllCount%$pageSize==0)
  $pageAllCount=$rsAllCount/$pageSize;
 else
  $pageAllCount=intval($rsAllCount/$pageSize)+1;

 $beginRs=($curPage-1)*$pageSize; //計算起始記錄
 $curRsSql="select id,title, posttime from article where board=$bid and wid=30 and auditor is not null and accessable=1 order by posttime desc limit $beginRs,$pageSize";
 $rsCur=$dbh->query($curRsSql)->fetchAll();
 echo(json_encode(array("rs"=>$rsCur,"pageCount"=>$pageAllCount,"curPage"=>$curPage,"sql"=>$curRsSql)));
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 別了 JavaScript中的isXX系列

    別了 JavaScript中的isXX系列

    我們很容易被漂亮的代碼吸引,也不知不覺的在自己的代碼庫中加入這些。卻沒有冷靜的想過它們的優(yōu)劣。這不,我就收集了一系列形如 是否為……? 的判斷的boolean函數(shù)
    2012-08-08
  • JavaScript解析機(jī)制與閉包原理實例詳解

    JavaScript解析機(jī)制與閉包原理實例詳解

    這篇文章主要介紹了JavaScript解析機(jī)制與閉包原理,結(jié)合實例形式詳細(xì)分析了javascript解析機(jī)制相關(guān)概念、功能、用法以及閉包的原理、定義、使用方法,需要的朋友可以參考下
    2019-03-03
  • 微信小程序拖拽排序列表的示例代碼

    微信小程序拖拽排序列表的示例代碼

    這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • layui清除radio的選中狀態(tài)實例

    layui清除radio的選中狀態(tài)實例

    今天小編就為大家分享一篇layui清除radio的選中狀態(tài)實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)(2)

    JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)(2)

    這篇文章主要介紹了JavaScript限制在客戶區(qū)可見范圍的拖拽,解決scrollLeft和scrollTop的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄

    Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄

    這篇文章給大家介紹了Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • js實現(xiàn)圖片無縫滾動

    js實現(xiàn)圖片無縫滾動

    這篇文章主要介紹了Javascript圖片無縫滾動的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下
    2015-12-12
  • JavaScript中for of和for in的區(qū)別詳解

    JavaScript中for of和for in的區(qū)別詳解

    對于初學(xué)者,我們或許只知道無論是for of還是for in他們都有一個功能那就是遍歷,至于具體的細(xì)節(jié)或許我們不是很清楚,那么接下來我們就來詳細(xì)的區(qū)分一下for of和for in他們之間的不同點(diǎn)和相同點(diǎn),需要的朋友可以參考下
    2023-06-06
  • 一文概述ES7~12的語法及其相關(guān)使用規(guī)則

    一文概述ES7~12的語法及其相關(guān)使用規(guī)則

    隨著JavaScript這門語言越來越流行,使得JavaScript這門語言越來越完善,這篇文章主要介紹了一文概述ES7~12的語法及其相關(guān)使用規(guī)則,需要的朋友可以參考下
    2023-01-01
  • JavaScript檢測并限制復(fù)選框選中個數(shù)的方法

    JavaScript檢測并限制復(fù)選框選中個數(shù)的方法

    這篇文章主要介紹了JavaScript檢測并限制復(fù)選框選中個數(shù)的方法,涉及javascript針對復(fù)選框的判定與運(yùn)算相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
    2015-08-08

最新評論