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中将此列删除即可。