jq分页代码（jQuery分页）

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

本文目录一览：

• 1、jqpaginator ajax分页怎么使用
• 2、jqgrid能前台分页么？jqgrid前端分页和排序的实现
• 3、Laravel一个页面里有多个分页并用jQuery pagination.js实现
• 4、jquery 分页无刷新的简单代码求教，
• 5、JQ前台分页

jqpaginator ajax分页怎么使用

现在网上各种各样的分页组件很多，但是很难找到十分"称心如意"的，于是jqPaginator诞生了。

我心中理想的分页组件，要不受CSS框架限制，可以使用在各种不同风格中的网页中。以我浅显的经验来看，要达到这个目标，关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义，使其灵活的使用了各种不同的场景。

效果截图：

使用说明

例子

用法很简单，首先引入jQuery和jqPaginator，之后就可以初始化分页了

$('#id').jqPaginator({

totalPages: 100,

visiblePages: 10,

currentPage: 1,

first: 'li class="first"a href="javascript:void(0);"First/a/li',

prev: 'li class="prev"a href="javascript:void(0);"Previous/a/li',

next: 'li class="next"a href="javascript:void(0);"Next/a/li',

last: 'li class="last"a href="javascript:void(0);"Last/a/li',

page: 'li class="page"a href="javascript:void(0);"{{page}}/a/li',

onPageChange: function (num) {

$('#text').html('当前第' + num + '页');

}

});

上例就是第一Demo，Bootstrap风格的分页。具

jqgrid能前台分页么？jqgrid前端分页和排序的实现

jQuery("#list27").jqGrid({

url:'localset.php',

datatype: "json",

height: 255,

width: 600,

colNames:['Index','Name', 'Code'],

colModel:[

{name:'item_id',index:'item_id', width:65, sorttype:'int'},

{name:'item',index:'item', width:150},

{name:'item_cd',index:'item_cd', width:100}

],

rowNum:50,

rowTotal: 2000, ----一次加载的最大行数

rowList : [20,30,50],

loadonce:true,

----一次加载

mtype: "GET",

rownumbers: true,

rownumWidth: 40,

gridview: true,

pager: '#pager27',

sortname: 'item_id',

viewrecords: true,

sortorder: "asc",

caption: "Loading data from server at once"

});

Laravel一个页面里有多个分页并用jQuery pagination.js实现

Laravel一个页面里有多个分页并用jQuery pagination.js实现

[javascript] view plain copy

!-- JQUERY分页 --

script src="{{asset('lib/js/jquery.pagination.js')}}"/script //引入该文件前别忘了引入JQUERY库

script

$(function(){

//这是一个非常简单的demo实例，让列表元素分页显示,我们一个页面里既有老师，又有学生，分别分页，还要换行

//回调函数的作用是显示对应分页的列表项内容

//回调函数在用户每次点击分页链接的时候执行

//参数page_index{int整型}表示当前的索引页

var initPagination = function() {

// var num_entries = $("#hiddenresult div.result").length;

// 创建分页

var num_entries = $(".teacher").length; //这个是总条数，所以把生成的teacher类的tr全统计一下

$("#teacher_page").pagination(num_entries, {

num_edge_entries: 1, //边缘页数

num_display_entries: 4, //主体页数

callback: pageselectCallback,

items_per_page:10, //每页显示项

prev_text:"上页",

next_text:"下页",

});

var num2 = $(".student").length;

$("#student_page").pagination(num2, {

num_edge_entries: 1, //边缘页数

num_display_entries: 4, //主体页数

callback: stuPageselectCallback,

items_per_page:10, //每页显示项

prev_text:"上页",

next_text:"下页",

});

}();

function pageselectCallback(page_index,jq){ //回调函数，page_index是当前页的页码，第一页是0,jq是页面那个分页的条条容器

var num_entries = $(".teacher").length; //总条数

var per_page = 10; //每页显示

var max_elem = Math.min((page_index+1)*per_page,num_entries); //每页的最大值

// 获取加载元素

$('.teacher_tr').hide(); //先把原来输出的隐藏

$('.teacher_tr_new1').empty(); //清空第一行，我们要按照两行，每行5个输出

$('.teacher_tr_new2').empty(); //清空第二行

var i = 0;

for(var j=page_index*per_page;jmax_elem;j++){ //每页执行这个循环，因为是回调函数，所以换一次页执行一次

if(i=0 iMath.ceil(per_page/2)){ //如果这样就输出到第一行

$('.teacher_tr_new1').append("td"+$(".teacher:eq("+j+")").html()+"/td");

}else if(i=Math.ceil(per_page/2) iper_page){ //输出到第二行

$('.teacher_tr_new2').append("td"+$(".teacher:eq("+j+")").html()+"/td");

}

i++;

if(i == per_page){ //用I控制是将内容填充到teacher_tr_new1还是2，10是每页显示条数

i = 0;

}

}

console.log();

//JQ代表页面装载的容器pagi1,pagi2之类的

return false;

}

function stuPageselectCallback(page_index,jq){ //学生的分页

var num_entries = $(".student").length;

var per_page = 10;

var max_elem = Math.min((page_index+1)*per_page,num_entries);

// 获取加载元素

// $(jq).prev().hide();

// $(jq).prev().prev().empty();

$('.student_tr').hide();

$('.student_tr_new1').empty();

$('.student_tr_new2').empty();

var i = 0;

for(var j=page_index*per_page;jmax_elem;j++){

if(i=0 iMath.ceil(per_page/2)){

$('.student_tr_new1').append("td"+$(".student:eq("+j+")").html()+"/td");

}else if(i=Math.ceil(per_page/2) iper_page){

$('.student_tr_new2').append("td"+$(".student:eq("+j+")").html()+"/td");

}

i++;

if(i == per_page){

i = 0;

}

}

console.log();

//JQ代表页面装载的容器pagi1,pagi2之类的

return false;

}

});

/script

!-- JQUERY分页结束 --

下面是模板：

[html] view plain copy

table

tr class='teacher_tr'

?php $i=1; ?

@foreach($teachers as $t)

td class='teacher'

a href="{{URL('myschoolmobileview/jiaoshi/'.$t-id)}}" target='_blank'{{OfficeConvert($t-office_id)}}:{{$t-name}}/a

br

img src="{{URL($t-protrait)}}" alt="" width='180' height='250'

/td

?php

if($i%5==0){

echo "/tr";

echo "tr class='teacher_tr'";

}

$i++;

?

@endforeach

/table

该班的老师：

table class='table'

tr class='teacher_tr_new1' //第一行

/tr

tr class='teacher_tr_new2' //第二行

/tr

tr

tddiv id='teacher_page' class='pagination'/div/td //这里就是我所说的那个容器jq

/tr

/table

!-- 老师结束 --

!-- 学生开始 --

table

tr class='student_tr'

?php $i=1; ?

@foreach($students as $s)

td class='student'

{{StudentRoleConvert($s-role_id)}}:{{$s-name}}

br

img src="{{URL($s-header_img)}}" alt="" width='180' height='250'

/td

?php

if($i%5==0){

echo "/tr ";

echo "tr class='student_tr'";

}

$i++;

?

@endforeach

/table

该班的学生：

table class='table'

tr class='student_tr_new1'

/tr

tr class='student_tr_new2'

/tr

tr

tddiv id='student_page' class='pagination'/div/td

/tr

/table

最后还要注意下就是，往页面里输出的结果太多的话可能会卡，因为原理就是把别的隐藏，只显示你想要的

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

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分页代码和jQuery分页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。