jquery table 分页(jquery动态怎么实现表格分页)
本文目录
jquery动态怎么实现表格分页
《!DOCTYPE html》
《html lang=“en“》
《head》
《meta charset=“UTF-8“》
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》
《meta http-equiv=“X-UA-Compatible“ content=“ie=edge“》
《title》Document《/title》
《/head》
《body》
《table》
《tr》
《th》1《/th》
《th》2《/th》
《th》3《/th》
《th》4《/th》
《/tr》
《/table》
《table id=“result“》
《tr》
《td》1《/td》
《td》2《/td》
《td》3《/td》
《td》4《/td》
《/tr》
《tr》
《td》1《/td》
《td》2《/td》
《td》3《/td》
《td》4《/td》
《/tr》
《tr》
《td》1《/td》
《td》2《/td》
《td》3《/td》
《td》4《/td》
《/tr》
《tr》
《td》1《/td》
《td》2《/td》
《td》3《/td》
《td》4《/td》
《/tr》
《/table》
《div id=“barcon“》《/div》
《script》
window.onload = function () {
goPage(1)
}
function goPage(pno) {
var itable = document.getElementById(“result“);
var num = itable.rows.length; //表格所有行数(所有记录数)
console.log(num);
var totalPage = 0; //总页数
var pageSize = 3; //每页显示行数
//总共分几页
if (num / pageSize 》 parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}
var currentPage = pno; //当前页数
var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行 31
var endRow = currentPage * pageSize; //结束显示的行 40
endRow = (endRow 》 num) ? num : endRow; //40
//遍历显示数据实现分页
for (var i = 1; i 《 (num + 1); i++) {
var irow = itable.rows[i - 1];
if (i 》= startRow && i 《= endRow) {
irow.style.display = “table-row“;
} else {
irow.style.display = “none“;
}
}
var pageEnd = document.getElementById(“pageEnd“);
var tempStr = “《span》共“ + totalPage + “页《/span》“;
if (currentPage 》 1) {
tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (1) + “)\“》首页《/span》“;
tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (currentPage - 1) + “)\“》上一页《/span》“
} else {
tempStr += “《span class=’btn spanbtn’》首页《/span》“;
tempStr += “《span class=’btn spanbtn’》上一页《/span》“;
}
if (totalPage == 1) {
tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ + currentPage +
“《/span》《/a》“
} else if (totalPage == 2 && currentPage == 1) {
tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn pageicon nowpage’》“ + currentPage +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ +
(currentPage + 1) + “《/span》《/a》“
} else if (totalPage == 2 && currentPage == 2) {
tempStr += “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -
1) + “《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ +
currentPage + “《/span》《/a》“
} else if (totalPage 》= 3 && currentPage == 1) {
tempStr += “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ + currentPage +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ +
(currentPage + 1) +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 2) + “)\“》《span class=’spanbtn pageicon’》“ + (
currentPage + 2) +
“《/span》《/a》“
} else if (totalPage 》= 3 && currentPage == totalPage) {
tempStr += “《a onclick=\“goPage(“ + (currentPage - 2) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -
2) +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ +
(currentPage - 1) +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ +
currentPage +
“《/span》《/a》“
} else {
tempStr += “《a onclick=\“goPage(“ + (currentPage - 1) + “)\“》《span class=’spanbtn pageicon’》“ + (currentPage -
1) +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + currentPage + “)\“》《span class=’spanbtn nowpage pageicon’》“ +
currentPage +
“《/span》《/a》“ + “《a onclick=\“goPage(“ + (currentPage + 1) + “)\“》《span class=’spanbtn pageicon’》“ + (
currentPage + 1) +
“《/span》《/a》“
}
if (currentPage 《 totalPage) {
tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (currentPage + 1) + “)\“》下一页《/span》“;
tempStr += “《span class=’btn spanbtn’ href=\“#\“ onClick=\“goPage(“ + (totalPage) + “)\“》尾页《/span》“;
} else {
tempStr += “《span class=’btn spanbtn’》下一页《/span》“;
tempStr += “《span class=’btn spanbtn’》尾页《/span》“;
}
document.getElementById(“barcon“).innerHTML = tempStr;
}
《/script》
《/body》
《/html》
自己修改一下table中元素的CSS样式,分页页码的样式,就能看出来效果了
Jquery + Json 前台Table动态分页
就是和JSP,php等的分页差不多呀,不过用JAVASCRIPT时间罢了。
要知道当前是第几页,共有多少条记录,每页几条就差不多了。
不过话说回来,你这个方法不太好吧?如果无理解错你的意思是先把全部数据都读出来,再在前台用jquery处理分页显示?如果是这样的话,可能会浪费不少哦,比如数据库有1W条记录的话,一次过全部读出来就很浪费了,也没几个人会翻1千页吧?如果是的话那这个方法还行。
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.pageCount);
$(“#totalCount“).val(data.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);
List《SmUser》 smUserList = (List《SmUser》)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“);
List《POJO》 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());
}
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插件,类似的插件很多。
jQuery,table,josn,动态生成分页
《table cellpadding=“0“ cellspacing=“0“ border=“0“ id=“shop“》
《thead》
《tr》
《th》 《/th》
《th》Title《/th》
《th》Author(s)《/th》
《th》Publish Date《/th》
《th》Price《/th》
《/tr》
《/thead》
《tbody》
《tr》
《td》
《img src=“./img/1.gif“ width=“97“ height=“25“ alt=“Buliding Website“/》
《/td》
《td》E见周五为欧式的方式浪费时间都《/td》
《td》Nagen Graf《/td》
《td》May 2004《/td》
《td》$50.09《/td》
《/tr》
《tr》
《/tbody》
《/table》
《script type=“text/javascript“》
$(document).ready(function()
{
var $table = $(’table’);
//分页效果
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“); //初始化
});
《/script》
更多文章:
下载手机卫士最新版本(百度手机卫士 管理手机自启应用的方法)
2024年8月7日 20:30
当当书城网上书店官网(余年庆小说有第二部吗当当网上有庆余年的电子书吗)
2024年8月30日 18:55
任天堂明星大乱斗下载(我想在电脑里玩任天堂明星大乱斗在哪里可以下载到)
2024年6月26日 12:34
小马windows7激活工具(如何使用“小马激活工具”激活windows7系统)
2024年7月13日 22:02
宠物外星人的游戏攻略?有个动画片外国的上面有个小女孩有个宠物是外星生物身体是蓝色的长长的耳朵特点是两颗牙齿老
2024年7月1日 03:50
《三体2——黑暗森林》全集_by刘慈欣_txt下载免费全文阅读?《三体》、《三体2》、《三体3》各多少字
2024年2月9日 01:00
苹果手机怎么清理内存垃圾清理(苹果手机怎么清理内存垃圾清理)
2024年7月25日 08:55
天龙八部tlbb3在线客服我的账号被盗,密码,手机绑定,畅游+都给改了,怎么才能找回来?tlbb3几天不上有回归
2024年6月7日 21:14