jquerypaginate使用方法

① 請問如何用jquery 實現html頁面的分頁查詢

首先你需要一個pageBean類，用來定義一些分頁需要的數據！
public class PageBean<T> {
private int pageCount = 0; // 總頁數
private List<T> pageData = null; // 當前頁數據集
private int pageSize = 10; // 每頁大小
private int currentPage = 1; // 當前頁
private long totalRecord = 0; // 總記錄數
private int beginIndex = 0; // 分頁起始記錄號
private int endIndex = 1; // 分頁結束記錄號

public int getPageCount() {
pageCount = (int)(totalRecord + pageSize -1)/pageSize;
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public List<T> getPageData() {
return pageData;
}
public void setPageData(List<T> pageData) {
this.pageData = pageData;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getCurrentPage() {
if (currentPage < 1) {
currentPage = 1;
}
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public long getTotalRecord() {
if (totalRecord < 0) {
totalRecord = 0;
}
return totalRecord;
}
public void setTotalRecord(long totalRecord) {
this.totalRecord = totalRecord;
}
public int getBeginIndex() {
beginIndex = (currentPage - 1) * pageSize+1;
return beginIndex;
}
public void setBeginIndex(int beginIndex) {
this.beginIndex = beginIndex;
}
public int getEndIndex() {
endIndex = currentPage * pageSize;
return endIndex;
}
public void setEndIndex(int endIndex) {
this.endIndex = endIndex;
}
}
頁面上，使用jQuery的Ajax發送後台請求信息:
$.ajax({
type:"post",
url:"requestPage",
dataType:"json",
data:{這里就是封裝數據的地方，比如你要到第二頁的時候，在這之前要讀取當前的頁數，並進行適當的判斷，是鍵值對的形式例如:"current":1,"pageSize":10},
success:function(data){
這里是返回json字元串
var jsonObj=$(data);
然後解析遍歷json
$.each(data.pageData,function(index,item){
這個回調函數裡面的第一個參數是下標，第二個參數是集合裡面的單個對象
然後生成顯示…………結束
});
}
}):

② 用jquery實現表格列排序

$(document).ready(function()
{
//插件的形式
jQuery.fn.alterRowColors = function()
{
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
}
//1.此時的函數是作為jQuery.fn的一個新屬性定義的，不是孤立的函數，這樣就把該函數注冊成了一個插件，
//2.使用關鍵字this，在一個插件內部，this表示的是調用該插件的jQuery對象，
//3.最後在函數的末尾返回this,返回這個值可以使這個新方法能夠繼續連綴其他的方法。

var $sortOrder = 0; //排序類型 1表示升序，0表示降序
var $table = $('table#shop');

$table.alterRowColors();

$('th', $table).each(function( column )
{
//處理三種有可能存在的排序欄位，比較方法
var findSortKey;
if( $(this).is('.sort-title') || $(this).is('.sort-author') )
{
findSortKey = function( $cell )
{
return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();
}
}
else if( $(this).is('.sort-date') )
{
findSortKey = function( $cell )
{
return Date.parse('1' + $cell.text());
}
}
else if( $(this).is('.sort-price') )
{
findSortKey = function( $cell )
{
var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))
return isNaN(key) ? 0 : key;
}
}

//排序
if( findSortKey )
{
$(this).addClass('clickable').hover(function()
{
$(this).addClass('hover');
var $title = $sortOrder == 0 ? '升序' : '降序';
$(this).attr('title', '按'+ $(this).html() + $title +'排列');
}, function()
{
$(this).removeClass('hover');
}).click(function()
{
$sortOrder = $sortOrder == 0 ? 1 : 0;

var rows = $table.find('tbody > tr').get();

$.each( rows, function( index, row )
{
row.sortKey = findSortKey($(row).children('td').eq(column));
});
//排序方法
rows.sort(function( a, b )
{
if( $sortOrder == 1 )
{
//升序
if(a.sortKey < b.sortKey) return -1;
if(a.sortKey > b.sortKey) return 1;
return 0;
}
else
{
//降序
if(a.sortKey < b.sortKey) return 1;
if(a.sortKey > b.sortKey) return -1;
return 0;
}
});
//排序後的對象添加給$table
$.each( rows, function( index, row )
{
$table.children('tbody').append(row);
row.sortKey = null;
});

//顯著標明是通過某一列排序的
$table.find('td').removeClass('sorted')
.filter(':nth-child('+ (column + 1) +')').addClass('sorted');

//重新賦予奇偶行的樣式
$table.alterRowColors();
});
}
});

//分頁效果
var currentPage = 0; //當前頁
var pageSize = 10; //每頁行數（不包括表頭）
//綁定分頁事件
$table.bind('repaginate', function()
{
$table.find('tbody tr').hide()
.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});

var numRows = $table.find('tbody tr').length; //記錄宗條數
var numPages = Math.ceil(numRows/pageSize); //總頁數

var $pager = $('<div class="page"></div>'); //分頁div
for( var page = 0; page < numPages; page++ )
{
//為分頁標簽加上鏈接
$('<a href="#" ><span>'+ (page+1) +'</span></a>')
.bind("click", { "newPage": page }, function(event)
{
currentPage = event.data["newPage"];
$table.trigger("repaginate");
})
.appendTo($pager);

$pager.append("");
}
$pager.insertAfter($table); //分頁div插入table

$table.trigger("repaginate"); //初始化

});

③ jquery.pagination.js怎麼用

1，下載3個文件
分別為：jquery-1.7.1.js、jquery.pagination.js、pagination.css
//詳見附件

2，准備好伺服器端返回結果
主要代碼如下：

Php代碼
$members = array(array().......); //詳見附件
$total = count($members);
$pageIndex = $_POST['pageIndex'];
$items_per_page = $_POST['items_per_page'];

$result = array();
$start = $pageIndex * $items_per_page;
$end = ($pageIndex+1) * $items_per_page;
if($end > $total){$end = $total;}
for($i = $start; $i < $end; $i++){
$result[] = $members[$i];
}

print json_encode(array('total'=>$total,'result'=>$result));

3，前端js代碼（核心）

Js代碼
var items_per_page = 3;
var page_index = 0;

function getDataList(index){
var pageIndex = index;
$.ajax({
type: "POST",
url: "members.php",
data: "pageIndex="+pageIndex+'&items_per_page='+items_per_page,
dataType: 'json',
contentType: "application/x-www-form-urlencoded",
success: function(msg){
var total = msg.total;
var html = '<table><tr><th>姓名</th><th>工作時間</th><th>籍貫</th><th>職務</th><th>生卒年</th><th>操作</th></tr>';
$.each(msg.result,function(i,n){
html += '<tr><td>'+n[0]+'</td><td>'+n[1]+'</td><td>'+n[2]+'</td><td>'+n[3]+'</td><td>'+n[4]+'</td>'
html += '<td><a href=#>刪除</a></td></tr>';
});
html += '</table>';
$('#Searchresult').html(html);

//分頁-只初始化一次
if($("#Pagination").html().length == ''){
$("#Pagination").pagination(total, {
'items_per_page' : items_per_page,
'num_display_entries' : 10,
'num_edge_entries' : 2,
'prev_text' : "上一頁",
'next_text' : "下一頁",
'callback' : pageselectCallback
});
}
}
});
}

function pageselectCallback(page_index, jq){
getDataList(page_index);
}

$(document).ready(function(){
getDataList(page_index);
});

4，前端html

Html代碼
<dl id="Searchresult">
<dt>Search Results will be inserted here ...</dt>
</dl>
<br style="clear:both;" />
<div id="Pagination" class="pagination"></div>
<br style="clear:both;" />

批註：
（1）jquery.js和jquery.pagination.js插件的載入有先後順序，不能顛倒。特別是在復雜的頁面中。
（2）jquery.pagination.js實現可以有很多種。不同的分頁插件，使用時可能會有差別，所以最好有足夠的js功底，讀懂那些插件是如何實現，以及如何引用。
（3）pagination.css是樣式，可以獨立出來。也即可以使用很多種不同的樣式修飾，不必是給出的那一個。

④ 如何直接調用jquery pagination中pageselect方法進行跳轉到指定頁面

不要帶參數，page_index直接獲取,
function pageselectCallback() {page_index=$('#page_index').val();
page_index=page_index+1;
function pageselectCallback(page_index, jq) {

⑤ 關於jquery.pagination.js分頁的問題，老報錯是怎麼回事

我也是啊，但個頁面可以，放到mvcindex中就是不行。

------------------------------------------------------------------------

我剛才出來效果了。

我用的MVC4.

一、先在BundleConfig.cs中 引入css 和 jpaginate

//分頁腳本

bundles.Add(new ScriptBundle("~/bundles/jPaginate").Include("~/Content/jPaginate/jquery.paginate.js"));

//分頁樣式

bundles.Add(new StyleBundle("~/bundles/jPaginateCss").Include("~/Content/jPaginate/css/style.css"));

二、 在再layout中 加入：

@Styles.Render("~/bundles/jPaginateCss")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jPaginate")

注意吧jquery的提前了

三、 然後再 Index 中

@{
ViewBag.Title="Index";
}
<h2>Index</h2>
<divclass="demo">
<h1>Demo4</h1>
<divid="demo1">
</div>
</div>
<script>

$(function(){
$("#demo1").paginate();
});
</script>

這是默認的風格，然後自己去調吧 剛試出來的

⑥ jQuery分頁插件pagination具體怎麼用求詳細教程

本文實例為大家分享了jQuery Pagination分頁插件的具體代碼，供大家參考，具體內容如下
一、引用CSS和JS：
<link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"></script>
二、HTML：
<div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;"> </div>
三、JS：
$(function () { var total = parseInt("@(ViewBag.total)"); var page = parseInt("@(ViewBag.page)") - 1; var pageSize = parseInt("@(ViewBag.pageSize)"); $("#Pagination").pagination(total, { callback: function (page_id) { window.location = "BoardList?page=" + page_id + "&pageSize=" + this.items_per_page; }, //PageCallback() 為翻頁調用次函數。 prev_text: " 上一頁", next_text: "下一頁 ", items_per_page: 10, //每頁的數據個數 num_display_entries: 1, //兩側首尾分頁條目數 current_page: page, //當前頁碼 num_edge_entries: 11 //連續分頁主體部分分頁條目數 }); });
四、後台代碼：
public ActionResult BoardList() { PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse(Request["page"]) + 1; pager.rows = int.Parse(Request["pageSize"]); pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList(ref pager); List<BoardModel> boardList = pager.result as List<BoardModel>; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

⑦ jquery 分頁插件pagination的回調函數callback在什麼時候執行有什麼用

callback 在點擊下一頁，或上一頁後，頁面載入完成之後，執行，在callback方法里可以u將currPage的值改變。

⑧ 今天同事利用jquery.pagination.js實現分頁查詢,請問一下函數都是什麼意思

num_entries一共有幾頁
init是初始化的意思當初化的時候call getOptionsFromForm() function，並且把option sign到id為Pagination的element上。

getOptionsFromForm()會返回pagination所需要的option

opt（option）是個obj（hash）它對應的callback就是pageselectCallback換句話說每點一次上一頁或者下一頁就會call pageselectCallback(page_index, jq) function
items_per_page每頁顯示幾個item東西
num_display_entries一共5個頁
num_edge_entries邊緣一共顯示兩頁
prev_text左翻頁的文字是<上一頁
next_text右翻頁的文字是下一頁>

在callback中也就是pageselectCallback(page_index, jq)
page_index指的是當前在哪一頁

⑨ jquery pagination 分頁 具體實現分頁的原理

這個應該是一次性載入出所有數據，比如100條，一頁10條。第一頁就顯示10條，其他的隱藏，下一頁就顯示10-20條，其他的隱藏。 數據量大的話不建議使用

⑩ tp5 ,二維數組怎麼使用paginate方法

1、首先在SQL Window窗口中，查詢需要導出的數據。
2、在查詢的結果集上（注意不要選中任何一個行或者單元格）右鍵--【Copy to Excel】-->【Copy as xls/xlsx】導出到97-2003格式的.xls或者2007之後的xlsx文件.
3、如果不想導出查詢的全部數據，可以在左側選中需要導出的行，然後步奏同上。
4、點擊導出後，系統自動打開導出的excel文件內容，這裡麵包括數據以及查詢這些數據的sql腳本。
5、點擊「SQL Statement」可以查看資料庫腳本。
6、下面就是操作excel文件了。點擊【文件】--【另存為】保存excel文件
7、選擇保存路徑，輸入文件名稱。
注意事項：導出到excel的時候，行記錄數也會被自動導出。如果不需要可以在excel中將此列刪除即可。