jq分页交互代码（jqgrid分页pager）

今天给各位分享jq分页交互代码的知识，其中也会对jqgrid分页pager进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、table表格jquery分页怎么写
• 2、jquery 分页无刷新的简单代码求教，
• 3、jQuery分页插件pagination具体怎么用？求详细教程
• 4、请问如何用jquery 实现html页面的分页查询
• 5、JQ前台分页

table表格jquery分页怎么写

script language="jscript" type="text/javascript" 

var pageIndex = 1; //当前页数 

$(function(){ 

GetPageCount();//获取分页数量以及总的记录条数 

$("#load").hide();//隐藏loading提示 

$("#template").hide();//隐藏模板 

ChangeState(0,1);//设置翻页按钮的初始状态 

bind();//绑定第一页的数据 

//第一页按钮click事件 

$("#first").click(function(){ 

pageIndex = 1; 

ChangeState(0,1); 

bind(); 

}); 

//上一页按钮click事件 

$("#previous").click(function(){ 

pageIndex -= 1; 

ChangeState(-1,1); 

if(pageIndex = 1){ 

pageIndex = 1; 

ChangeState(0,-1); 

} 

bind(); 

}); 

//下一页按钮click事件 

$("#next").click(function(){ 

pageIndex += 1; 

ChangeState(1,-1); 

if(pageIndex=pageCount) 

{ 

pageIndex = pageCount; 

ChangeState(-1,0); 

} 

bind(pageIndex); 

}); 

//最后一页按钮click事件 

$("#last").click(function(){ 

pageIndex = pageCount; 

ChangeState(1,0); 

bind(pageIndex); 

}); 

//每页显示记录条数select事件 

$("#pageSize").change(function(){ 

bind(); 

}) 

}); 

//AJAX方法取得数据并显示到页面上 

function bind(){ 

$("#load").show(); 

var pageSize = $("#pageSize").val(); 

$.ajax({ 

type: "get",//使用get方法访问后台 

dataType: "json",//返回json格式的数据 

url: "%=basePath%actionSmUser.do?method=listUser2",//要访问的后台地址 

data: "pageIndex=" + pageIndex+"pageSize="+pageSize,//要发送的数据 

complete : function(msg){//msg为返回的数据，在这里做数据绑定 

$("[id=ready]").remove(); 

var data = eval("("+msg.responseText+")"); 

$.each(data, function(i, n){ 

var row = $("#template").clone(); 

row.find("#userId").text(n.userId); 

row.find("#userName").text(n.userName); 

row.find("#depId").text(n.depId); 

row.find("#createTime").text(n.createTime); 

if(n.createTime !== undefined) row.find("#createTime").text(n.createTime); 

row.find("#creator").text(n.creator); 

row.find("#menusId").text(n.menusId); 

row.find("#isValid").text(n.isValid); 

row.attr("id","ready");//改变绑定好数据的行的id 

row.appendTo("#datas");//添加到模板的容器中 

}); 

$("[id=ready]").show(); 

SetPageInfo(); 

} 

}); 

} 

function ChangeDate(date){ 

return date.replace("-","/").replace("-","/"); 

} 

//设置第几页/共几页的信息 

function SetPageInfo(){ 

var pageCount = $("#pageCount").val(); 

var totalCount = $("#totalCount").val(); 

var pageSize = $("#pageSize").val(); 

$("#pageinfo").html(" 第input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+ 

"' style='width: 30px' / 页" + "/" +"共 "+pageCount+"页"+ 

" 检索到 "+totalCount+"条记录，显示第 "+(pageIndex*pageSize-pageSize)+" 条 - 第 "+(pageIndex*pageSize)+" 条记录"); 

} 

//AJAX方法取得分页总数 

function GetPageCount(){ 

var pageSize = $("#pageSize").val(); 

$.ajax({ 

type: "get", 

dataType: "text", 

url: "%=basePath%actionSmUser.do?method=getPageCount", 

data: "pageSize="+pageSize , 

async: false, 

success: function(msg){ 

var data = eval("("+msg+")"); 

$("#pageCount").val(data[0].pageCount); 

$("#totalCount").val(data[0].totalCount); 

} 

}); 

} 

//改变翻页按钮状态 

function ChangeState(state1,state2){ 

$("#first").attr("class","default_pgFirst default_pgBtn"); 

$("#previous").attr("class","default_pgPrev default_pgBtn"); 

$("#next").attr("class","default_pgNext default_pgBtn"); 

$("#last").attr("class","default_pgLast default_pgBtn"); 

if(state1 == 1) { 

document.getElementById("first").disabled = ""; 

document.getElementById("previous").disabled = ""; 

}else if(state1 == 0){ 

document.getElementById("first").disabled = "disabled"; 

document.getElementById("previous").disabled = "disabled"; 

$("#first").attr("class","default_pgFirstDisabled default_pgBtn"); 

$("#previous").attr("class","default_pgPrevDisabled default_pgBtn"); 

}if(state2 == 1){ 

document.getElementById("next").disabled = ""; 

document.getElementById("last").disabled = ""; 

}else if(state2 == 0){ 

document.getElementById("next").disabled = "disabled"; 

document.getElementById("last").disabled = "disabled"; 

$("#next").attr("class","default_pgNextDisabled default_pgBtn"); 

$("#last").attr("class","default_pgLastDisabled default_pgBtn"); 

} 

} 

/script 

html页面代码如下： 

复制代码代码如下:

body 

div 

div 

br / 

table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" 

tr class="fixheader" 

th width="14%" 

用户ID/th 

th width="14%" 

用户名称/th 

th width="14%" 

所在科室/th 

th width="14%" 

创建时间/th 

th width="14%" 

创建人/th 

th width="14%" 

菜单集名称/th 

th width="14%" 

是否有效/th 

/tr 

tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;" 

td id="userId" class="tdc" 

/td 

td id="userName" class="tdc" 

/td 

td id="depId" class="tdc" 

/td 

td id="createTime" class="tdc" 

/td 

td id="creator" class="tdc" 

/td 

td id="menusId" class="tdc" 

/td 

td id="isValid" class="tdc" 

/td 

/tr 

/table 

/div 

div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red" 

LOADING.... 

/div 

div class="default_pgContainer"  

div class="default_container" 

div class="default_pgPanel" id="skinDiv" 

table class="default_pgToolbar" 

tr 

td class="black_pgCurrentPage" 

select id="pageSize" name="pageSize" 

option selected="selected" value="10"10/option 

option value="20"20/option 

option value="30"30/option 

/select 

/td 

td 

div id="first" class="default_pgFirst default_pgBtn" / 

/td 

td 

div id="previous" class="default_pgPrev default_pgBtn" / 

/td 

td class="default_separator" 

/td 

td 

div id="next" class="default_pgNext default_pgBtn" / 

/td 

td 

div id="last" class="default_pgLast default_pgBtn" / 

/td 

td class="default_separator" 

/td 

td 

span id="pageinfo"/span 

/td 

/tr 

/table 

/div 

/div 

/div 

/div 

div id="test"/div 

input type="hidden" id="pageCount" style="width: 45px" / 

input type="hidden" id="totalCount" style="width: 45px" / 

/body 

后台action中代码如下： 

复制代码代码如下:

//分页获取用户信息 

public void listUser2(ActionMapping mapping, ActionForm form, 

HttpServletRequest request, HttpServletResponse response){ 

RequestTool tool = new RequestTool(request); 

Integer pageSize = tool.getIntParameter("pageSize"); 

Integer pageIndex = tool.getIntParameter("pageIndex"); 

ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize); 

ListSmUser smUserList = (ListSmUser)res.getResult(); 

JSONArray array = new JSONArray(); 

JSONObject object ; 

for(SmUser user:smUserList){ 

object = new JSONObject(); 

object.put("userId", user.getUserId()); 

object.put("userName",user.getUserName()); 

object.put("depId", user.getOrganCode()); 

object.put("createTime", user.getCreateTime()); 

object.put("creator", user.getCreator()); 

object.put("menusId", user.getMenusId()); 

object.put("isValid", (user.getValid().equals("1")?"有效":"无效")); 

array.add(object); 

} 

AjaxTool.returnAjaxResponse(response, array.toJSONString()); 

} 

//获取总的记录数和总页数 

public void getPageCount(ActionMapping mapping, ActionForm form, 

HttpServletRequest request, HttpServletResponse response){ 

RequestTool tool = new RequestTool(request); 

int pageSize = tool.getIntParameter("pageSize"); 

ListPOJO pojos = serviceSmUserImpl.findAll(); 

int pageCount = pojos.size()% pageSize  0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize); 

JSONArray array = new JSONArray(); 

JSONObject object = new JSONObject(); 

object.put("pageCount", pageCount); 

object.put("totalCount", pojos.size()); 

array.add(object); 

AjaxTool.returnAjaxResponse(response,array.toJSONString()); 

}

jquery 分页无刷新的简单代码求教，

无刷新分页代码，jQuery分页完整示例，分页形式经典，兼容性也做的好，网页上的分页代码

!DOCTYPE html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titlejQuery分页演示效果/title

script type="text/javascript" src="/img/jquery1.3.2.js"/script

script type="text/javascript"

$(document).ready(function(){

var show_per_page = 5;

var number_of_items = $('#content').children().size();

var number_of_pages = Math.ceil(number_of_items/show_per_page);

$('#current_page').val(0);

$('#show_per_page').val(show_per_page);

var navigation_html = 'a class="previous_link" href="javascript:previous();"Prev/a';

var current_link = 0;

while(number_of_pages current_link){

navigation_html += 'a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'"'+ (current_link + 1) +'/a';

current_link++;

}

navigation_html += 'a class="next_link" href="javascript:next();"Next/a';

$('#page_navigation').html(navigation_html);

$('#page_navigation .page_link:first').addClass('active_page');

$('#content').children().css('display', 'none');

$('#content').children().slice(0, show_per_page).css('display', 'block');

});

function previous(){

new_page = parseInt($('#current_page').val()) - 1;

if($('.active_page').prev('.page_link').length==true){

go_to_page(new_page);

}

}

function next(){

new_page = parseInt($('#current_page').val()) + 1;

//if there is an item after the current active link run the function

if($('.active_page').next('.page_link').length==true){

go_to_page(new_page);

}

}

function go_to_page(page_num){

var show_per_page = parseInt($('#show_per_page').val());

start_from = page_num * show_per_page;

end_on = start_from + show_per_page;

$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

$('#current_page').val(page_num);

}

/script

style

#page_navigation a{

padding:3px;

border:1px solid gray;

margin:2px;

color:black;

text-decoration:none

}

.active_page{

background:darkblue;

color:white !important;

}

/style

/head

body

input type='hidden' id='current_page' /

input type='hidden' id='show_per_page' /

div id='content'

pLorem ipsum dolor sit amet, consectetur adipiscing elit./p

pVestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet./p

pCurabitur a ipsum ut elit porttitor egestas non vitae libero./p

pPellentesque ac sem ac sem tincidunt euismod./p

pDuis hendrerit purus vitae nibh tincidunt bibendum./p

pNullam in nisi sit amet velit placerat laoreet./p

pVestibulum posuere ligula non dolor semper vel facilisis orci ultrices./p

pDonec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla./p

pIn non eros eu lacus vestibulum sodales./p

pDuis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis./p

pProin ullamcorper est vitae lorem mollis bibendum./p

pMaecenas congue fringilla enim, tristique laoreet tortor adipiscing eget./p

pDuis imperdiet metus et lorem venenatis nec porta libero porttitor./p

pMaecenas lacinia lectus ac nulla commodo lacinia./p

pMaecenas quis massa nisl, sed aliquet tortor./p

pQuisque porttitor tellus ut ligula mattis luctus./p

pIn at mi dolor, at consectetur risus./p

pEtiam id erat ut lorem fringilla dictum./p

pCurabitur sagittis dolor ac nisi interdum sed posuere tellus commodo./p

pPellentesque quis magna vitae quam malesuada aliquet./p

pCurabitur tempus tellus quis orci egestas condimentum./p

pMaecenas laoreet eros ac orci adipiscing pharetra./p

pNunc non mauris eu nibh tincidunt iaculis./p

pUt semper leo lacinia purus hendrerit facilisis./p

pPraesent et eros lacinia massa sollicitudin consequat./p

pProin non mauris in sem iaculis iaculis vel sed diam./p

pNunc quis quam pulvinar nibh volutpat aliquet eget in ante./p

pIn ultricies dui id libero pretium ullamcorper./p

pMorbi laoreet metus vitae ipsum lobortis ultrices./p

pDonec venenatis egestas arcu, quis eleifend erat tempus ullamcorper./p

pMorbi nec leo non enim mollis adipiscing sed et dolor./p

pCras non tellus enim, vel mollis diam./p

pPhasellus luctus quam id ligula commodo eu fringilla est cursus./p

pUt luctus augue tortor, in volutpat enim./p

pCras bibendum ante sed erat pharetra sodales./p

pDonec sollicitudin enim eu mi suscipit luctus posuere eros imperdiet./p

pVestibulum mollis tortor quis ipsum suscipit in venenatis nulla fermentum./p

pProin vehicula suscipit felis, vitae facilisis nulla bibendum ac./p

pCras iaculis neque et orci suscipit id porta risus feugiat./p

pSuspendisse eget tellus purus, ac pulvinar enim./p

pMorbi hendrerit ultrices enim, ac rutrum felis commodo in./p

pSuspendisse sagittis mattis sem, sit amet faucibus nisl fermentum vitae./p

pNulla sed purus et tellus convallis scelerisque./p

pNam at justo ut ante consectetur faucibus./p

pProin dapibus nisi a quam interdum lobortis./p

pNunc ornare nisi sed mi vehicula eu luctus mauris interdum./p

pMauris auctor suscipit tellus, at sodales nisi blandit sed./p

/div

div id='page_navigation'/divbr

br

/body

/html

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); ListBoardModel boardList = pager.result as ListBoardModel; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

请问如何用jquery 实现html页面的分页查询

首先你需要一个pageBean类，用来定义一些分页需要的数据！

public class PageBeanT {

private int pageCount = 0; // 总页数

private ListT 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 ListT getPageData() {

return pageData;

}

public void setPageData(ListT 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){

这个回调函数里面的第一个参数是下标，第二个参数是集合里面的单个对象

然后生成显示…………结束

});

}

}):

JQ前台分页

对于你这种情况，最好选一个表格插件，JQ能用的第三方表格插件特别多，你想要的这些功能默认都已经支持，上手简单，且功能强大。

GridManager.js：

GridManager.js可快速的对table标签进行实例化，实例化后将实现以下功能:

宽度调整: 表格的列宽度可进行拖拽式调整

位置更换: 表格的列位置进行拖拽式调整

配置列: 可通过配置对列进行显示隐藏转换

表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部

排序: 表格单项排序或组合排序

分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能

用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数

序号: 自动生成序号列

全选: 自动生成全选列

导出: 当前页数据下载,和仅针对已选中的表格下载

右键菜单: 常用功能在菜单中可进行快捷操作

过滤: 通过对列进行过滤达到快速搜索效果

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序

几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理

支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

各式各样的扩展: Editor, TableTools, FixedColumns ……

丰富多样的option和强大的API

支持国际化

Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。

更多插件可自行百度jquery table插件，类似的插件很多。

关于jq分页交互代码和jqgrid分页pager的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。