2. 程式人生 > >jquery pagination js分頁外掛的運用

jquery pagination js分頁外掛的運用

阿新 • • 發佈：2018-12-22
<script src="common/jquery.js" type="text/javascript"></script><script src="common/jquery.pagination.js" type="text/javascript"></script><link href="common/tablesorter.css" rel="stylesheet" type="text/css"/><link href="common/pagination.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">var orderby =""; //進行排序的依據   $(document).ready(function() {   InitData(0); //初始化資料   });   //這個事件是在翻頁時候用的 function pageselectCallback(page_id, jq) {   InitData(page_id);   }   function InitData(pageIndex) {   var tbody =""; //宣告表格中body部分   $.ajax({ //這裡使用到Jquery的ajax方法
  type: "POST",   dataType: "json",   url: 'GetData.ashx', //請求的處理資料   data: "pageIndex="+ (pageIndex +1) +"&sortType="+ orderby,   //傳入的引數，第一個引數就是分頁的頁數，第二個引數為排序的依據 //下面的操作就是成功返回資料以後，進行資料的繫結   success: function(data) {   $("#linkTable tr:gt(0)").remove();   var myData = data.Products;   $.each(myData,
function(i, n) {   var trs ="";   trs +="<tr><td align='center'>"+ n.ProductName +"</td><td>"+   n.QuantityPerUnit +"</td></tr>";   tbody += trs;   });   $("#linkTable").append(tbody);   }   });   //加入分頁的繫結   $("#Pagination").pagination(<%=pageCount %>, {   callback: pageselectCallback,   prev_text: '< 上一頁',   next_text: '下一頁 >',   items_per_page: 20,   num_display_entries: 6,   current_page: pageIndex,   num_edge_entries: 2   });   } </script><div><table id="linkTable" cellpadding="6" cellspacing="1" align="left"   class="tablesorter" style="width:400px;margin:0 0 20px 5px;"><thead><tr class="tableHeader" align="center"><th style="width:200px; text-align:center;">   產品名稱   </th><th style="width:200px; text-align:center">   產品單價   </th></tr></thead></table></div><div id="Pagination" class="digg"></div>

相關推薦

jquery pagination js分頁外掛的運用

<script src="common/jquery.js" type="text/javascript"></script><script src="common/jquery.pagination.js" type="text/javascript"></scri

AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分頁外掛) 的使用

模板引擎 分頁外掛 1.概念 模板引擎不屬於特定技術領域，它是跨領域跨平臺的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm開發都會用到模板引擎技術。 2.原理 置換型模板引擎實現簡單，但其效率低下，

jquery pagination多樣式分頁外掛程式碼

@charset "UTF-8"; /*ccs-1*/ .whj_jqueryPaginationCss-1{ display: inline-block; padding: 5px; user-select: none; -webkit-

淺談jQuery Pagination Ajax 分頁插件的使用

tco next 列表 知識 scrip var 如果 現在 ces 插件介紹 此插件是jQuery的ajax分頁插件。分頁切換時無刷新也無延遲，因為是一次性加載的。如果你用到此插件作分頁的時候，涉及到的數據量大，建議不要使用此插件，因為加載慢會導致用戶體驗不好！ 插件使用

BootStrop--bootstrap-paginator.js 分頁 外掛 的使用

樣式圖 引入資源 <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.min.js"></script> <link type="text

Mybatis+AngularJS +pagination.js分頁元件實現頁面分頁

前提條件： 搭建好SSM框架，或者其他框架 一、建立分頁結果類 public class PageResult implements Serializable{ private long total;//總記錄數 private List rows;//當前頁結果

Flask學習之旅--分頁功能：分別使用 flask--pagination 和分頁外掛 layPage

一、前言 　　現在開發一個網站，分頁是一個很常見的功能了，尤其是當資料達到一定量的時候，如果都顯示在頁面上，會造成頁面過長而影響使用者體驗，除此之外，還可能出現載入過慢等問題。因此，分頁就很有必要了。 　　分頁功能的常用的實現方法有兩種：前臺分頁和後臺分頁。前臺分頁就是一次查詢取出所有資料儲存在記憶體中，需要

分頁（不重新整理，使用到jquery.pagination.js外掛）

引用到外掛（可以從網上下載）： jquery.pagination.js pagination.css 在需要的分頁條的地方放入一個div <div id="paginate"></div> 在js裡書寫配置（pagination這裡面還

jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁

height var 實現 before 狀態 pin 好的 調用 是否 首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script>同時也要引入 <link r

分頁外掛jquery.simplePagination.js使用筆記

1. test_box.jsp頁面： <script type="text/javascript" src="${ctxJs}/jquery-1.7.2.min.js"></script> <script src="${ctxJs}/jquery.simpl

vue.js中使用vue-bootstrap-pagination 分頁外掛的問題

vue-bootstrap-pagination分頁外掛存在的一下問題不知道是官方的bug還是我哪裡寫錯了我的版本是2.0的分頁是正常顯示的，上一頁是正常的，但是在點選next的時候會出現問題；下面是我輸出的current_page預設是第一頁，點選next的時候page引數

用jquery.pagination.js製作分頁

如上圖要製作這樣的分頁。如是要用到jquery.pagination.js+pagination.css這連個檔案。如果沒有，可以在網上下載。下面解釋一下具體呼叫jquery.pagination.js。因為要做成公用的。所以我寫了一個頁面page.jsp.裡面就是具體條

jquery外掛pagination實現分頁

1、效果 2、HTML程式碼 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MvcAppTest.WebForm1" %> <!DOCTYPE h

一款不錯的jQuery分頁外掛--pagination

一、前言： 分頁功能在專案中時常用到，一款可以快速實現分頁功能的外掛非常有必要，pagination--這款外掛功能非常完美，幾乎我所有專案中使用到分頁的地方都會第一時間考慮到這個外掛，但是其實有能力

jquery ajax pagination分頁的使用例項（內含jquery.pagination.js）

(2)ajax例項： 標籤： <div class="pagelist"></div>    var pageSize =10;     GetData(1);     function GetData(index) {         va

Laravel一個頁面裡有多個分頁並用jQuery pagination.js實現

<!-- JQUERY分頁 --> <script src="{{asset('lib/js/jquery.pagination.js')}}"></script> //引入該檔案前別忘了引入JQUERY庫 <script>

jquery easy-ui 分頁插件的運用(給td添加事件,獲取匯總內容)

gin submit isp columns tag lac summary format put <#include ‘/admin/express-header.html‘ > <div class="main" style=" background:

jquery.pagination.js添加跳轉頁

ntp reat urn -c css nts llb eric borde 原作者github地址：https://github.com/gbirke/jquery_pagination 在這基礎上加入了跳轉到指定頁。 修改後的jquery.pagination.js

使用pagination分頁外掛實現ajax分頁

1.html頁面引入jq和js外掛 <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <s

Jquery 分頁外掛， 帶你一步一步接入後臺資料

目錄   一、效果圖 二、分頁 js 原始碼講解 三、分頁樣式 css 原始碼 三、實現前後臺對接 一、效果圖 二、分頁 js 原始碼講解 新建一個 js 檔案，基本直接複製貼上就行，記得引入到需要的頁面中。 需要注意的是： 前面的建構函式